2018年06月04日阅读 250

vue-router的使用

已经知道vue.js通过将组件进行组合，可以做成应用程序。并且通过将vue.js和vue-router的组合可以实现单页应用，用户体验佳，实现单页应用，就是将组件映射到路由，并且告诉路由要在哪里渲染特定的组件

可以使用简单的例子进行说明

html部分


< div>
  < p>
    < !-- 使用 router-link 组件来导航. -->
    < !-- 通过传入 `to` 属性指定链接. -->
    < !--  默认会被渲染成一个 `< a>` 标签 -->
    < router-link to="/apple">Go to Apple< /router-link>
    < router-link to="/banana">Go to Banana< /router-link>
  < /p>
  < !-- 路由出口 -->
  < !-- 路由匹配到的组件将渲染在这里 -->
  < router-view>< /router-view>
< /div>
复制代码

在vue-router中，使用< router-link>来进行导航，用其to属性指定链接实现路由跳转。但是在渲染的时候< router-link>会被解析为< a>标签。 < router-view>< /router-view>是用作渲染路由匹配到的组件

JavaScript部分


// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const apple = { template: '< div>Apple< /div>' }
const banana = { template: '< div>Banana< /div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
  { path: '/apple', component: apple },
  { path: '/banana', component: banana }
]

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes // 相当于 routes: routes
})

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

注：当对应的路由匹配成功，将自动设置 class 属性值 .router-link-active，可以利用此特性完成选择路由后的高亮效果！

通过注入路由器，我们可以在任何组件内通过 this. $router 访问路由器，也可以通过this.$ router 访问当前路由

动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：


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

/user/foo 和 /user/bar 都将映射到相同的路由。一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用

响应路由参数的变化

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：


const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}
//或者使用beforeRouteUpdate 守卫
const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}
复制代码

路由的嵌套

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，


< div id="app">
  < router-view>< /router-view>
< /div>
复制代码


const User = {
  template: '< div>User {{ $route.params.id }}< /div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
复制代码

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

'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 的  中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的  中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})
复制代码

!!注意：要注意，以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。此时，基于上面的配置，当你访问 /user/foo时，User的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个空的子路由：


const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的  中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]
})
复制代码