Vue-Router

路由两种模式

• hash模式：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

• history模式：

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

//设置mode属性，设置路由模式
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。所你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

实现路由懒加载

三种⽅式

• 第⼀种： vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使⽤vue的异步组件技术 , 可以 实现按需加载 .但是,这种情况下⼀个组件⽣成⼀个js⽂件。
• 第⼆种： 路由懒加载(使⽤import)。
• 第三种： webpack提供的require.ensure()，vue-router配置路由，使⽤webpack的require.ensure 技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成⼀个 js⽂件。

动态路由匹配

动态路径匹配：即把某种模式匹配到的所有路由，全都映射到同个组件。使用动态路由参数来实现。

例如，我们有一个 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 的模板，输出当前用户的 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

vue-router的几种实例方法

• this.$router.push(location, onComplete?, onAbort?)

这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。并且点击 等同于调用 router.push(…)。

• this.$router.replace(location, onComplete?, onAbort?)

这个方法不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录，所以，当用户点击浏览器后退按钮时，并不会回到之前的 URL。

• this.$router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

参数传递

vue-router提供了params、query、meta三种页面间传递参数的方式。

// 字符串，不带参数
this.$router.push('home')

// 对象，不带参数
this.$router.push({ path: 'home' })

// params（推荐）：命名的路由，params 必须和 name 搭配使用
this.$router.push({ name:'user',params: { userId: 123 }})

// 这里的 params 不生效
this.$router.push({ path:'/user',params: { userId: 123 }})

// query：带查询参数，变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})

//meta方式：路由元信息
export default new Router({
    routes: [
        {
            path: '/user',
            name: 'user',
            component: user,
            meta:{
                title:'个人中心'
            }
        }
    ]
})

获取参数：

//通过 $route 对象获取，注意是route，么有r
this.$route.params

this.$route.query

this.$route.meta

Vue-Router响应路由参数的变化

当使用路由参数时，例如从 /content?id=1 到 content?id=2，此时原来的组件实例会被复用。这也意味着组件的生命周期钩子不会再被调用，此时vue有两种方式响应路由参数

watch侦听器

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

2.2引入的beforeRouteUpdate 守卫

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

路由导航守卫

vue-Router导航守卫分为三类：

全局守卫

• 全局前置守卫router.beforeEach

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

• 全局解析守卫router.beforeResolve
• 全局后置钩子router.afterEach

router.afterEach((to, from) => {
  // ...
})

路由内独享守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内守卫

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

完整的路由导航解析流程

1、导航被触发。

2、在失活的组件里调用离开守卫。

3、调用全局的 beforeEach 守卫。

4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5、在路由配置里调用 beforeEnter。

6、解析异步路由组件。

7、在被激活的组件里调用 beforeRouteEnter。

8、调用全局的 beforeResole 守卫 (2.5+)。

9、导航被确认。

10、调用全局的 afterEach 钩子。

11、触发 DOM 更新。

12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

定义嵌套路由

第一步：需要在一个被渲染的组件中嵌套 组件。

const User = {
  template: `
    <div class="user">
      <h2>User</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/foo时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由
        { path: '', component: UserHome }
        
      ]
    }
  ]
})