vue-router之学习笔记

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

一、Vue引用插件

在vue开发过程中会用到很多插件，例如vue-router、vuex、vue-resource、mint UI、element-ui等，所有插件的引用方式都如下所示：

（这里是利用了vue-cli以及npm+webpack来搭建环境。如果不是，直接引用vue-router.js即可）

---

二、路由（vue-router）的基本使用

我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们：

demo

1、在页面上定义导航栏以及对应需要变化的模块

 <div id="app">
   <h1>Hello App!</h1>
   <p>
     <!-- 使用 router-link 组件来导航. -->
     <!-- 通过传入 `to` 属性指定链接. -->
     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
     <router-link to="/foo">Go to Foo</router-link>
     <router-link to="/bar">Go to Bar</router-link>
   </p>
   <!-- 路由出口 -->
   <!-- 路由匹配到的组件将渲染在这里 -->
   <router-view></router-view>
 </div>

2、在js中定义路由组件以及映射

 // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

 // 1. 定义（路由）组件。
 // 可以从其他文件 import 进来
 const Foo = { template: '<div>foo</div>' }
 const Bar = { template: '<div>bar</div>' }

 // 2. 定义路由
 // 每个路由应该映射一个组件。 其中"component" 可以是
 // 通过 Vue.extend() 创建的组件构造器，
 // 或者，只是一个组件配置对象。
 // 我们晚点再讨论嵌套路由。
 const routes = [
   { path: '/foo', component: Foo },
   { path: '/bar', component: Bar }
 ]

 // 3. 创建 router 实例，然后传 `routes` 配置
 // 你还可以传别的配置参数, 不过先这么简单着吧。
 const router = new VueRouter({
   routes // （缩写）相当于 routes: routes
 })

 // 4. 创建和挂载根实例。
 // 记得要通过 router 配置参数注入路由，
 // 从而让整个应用都有路由功能
 const app = new Vue({
   router
 }).$mount('#app')

 // 现在，应用已经启动了！

在使用vue-cli+npm+webpack时第4步创建和挂载根实例还可以这样写：

 var app = new Vue({
   el: '#app',
   router,
   template: '<App/>',
   components: { App }
 })

要注意，当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active

---

三、动态路由-传参

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』

demo

一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

 <div id="app">
   <p>
     <router-link to="/user/foo">/user/foo</router-link>
     <router-link to="/user/bar">/user/bar</router-link>
   </p>
   <router-view></router-view>
 </div>

 const User = {
   template: '<div>User {{ $route.params.id }}</div>'
 }
 const router = new VueRouter({
   routes: [
     // 动态路径参数 以冒号开头
     { path: '/user/:id', component: User }
   ]
 })

上述导航传参还有另外两种方式：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

router.push({ name: 'user', params: { userId: 123 }})

这两种方式都会把路由导航到 /user/123 路径。

---

四、嵌套路由

在动态路由的demo中，这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>

demo

 const User = {
   template: `
     <div class="user">
       <h2>User {{ $route.params.id }}</h2>
       <router-view></router-view>
     </div>
   `
 }

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

 const router = new VueRouter({
   routes: [
     { path: '/user/:id', component: User,
       children: [
         {
           // 当 /user/:id/profile 匹配成功，
           // UserProfile 会被渲染在 User 的 <router-view> 中
           path: 'profile',
           component: UserProfile
         },
         {
           // 当 /user/:id/posts 匹配成功
           // UserPosts 会被渲染在 User 的 <router-view> 中
           path: 'posts',
           component: UserPosts
         }
       ]
     }
   ]
 })

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由（例如demo中的UserHome）

---