vue-router的使用

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 访问当前路由

动态路由匹配

咱们常常须要把某种模式匹配到的全部路由，全都映射到同个组件。例如，咱们有一个 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 },

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