一些和 Vue Router 相关的问题

this.$router 和 this.$route

它们是两个注入到每个子组件的属性

• this.$router：router 实例。

• this.$route：当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。

*这篇文章介绍了注入是如何实现的

当 vue 实例 通过 $router、$route 属性访问 路由实例对象 和 路由信息对象 时， 实际访问的是 根 vue 实例 的 _router、_route 属性。

怎么定义动态路由？

想实现动态路由，需要使用动态路径参数

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

1
2
3
4
5
6
7
8
9
10

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

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

 介绍 active-class 属性

active-class是 的属性

设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

Vue Router 有哪些导航守卫？

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

查看导航解析流程

嵌套路由怎么实现？

在 user 路由下添加 children 属性，并且配置上子级跌幅的 path 和 component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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 组件内，添加 router-view 组件，以备子路由组件的填充

1
2
3
4
5
6
7
8

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

什么是 路由懒加载

如果能在访问某个路由时才加载对应的组件，就不必一次加载全部代码

写法：

1

const Foo = () => import('./Foo.vue')

1
2
3
4
5

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

将组件定义为一个返回 Promise 的函数（动态 import 会返回一个 Promise）

webpack 会利用 动态 import 来定义代码分块点

查看路由懒加载的工作流程

由于 路由 record 中的 组件 是一个函数， 执行函数， 通过 动态添加 script 的方式加载组件， 返回一个 promise，状态为 pending。

Router 实例方法有哪些？

导航守卫：

• router.beforeEach
• router.beforeResolve
• router.afterEach

导航到新URL：

• router.push
• router.replace
• router.go
• router.back
• router.forward

其他实例方法：

• router.getMatchedComponents
• router.resolve
• router.addRoutes
• router.onReady
• router.onError

*想知道路由变化和页面变化的关系就需要了解vue-router工作原理

通过 vm.$router.push 或者 vm.$router.replace 进行 页面跳转。在此过程中， 会在浏览器中 新增一个历史记录 或者 修改当前历史记录， 然后 更新根vue实例的_route(路由信息对象)属性， 触发 界面更新；界面重新渲染 的时候， 遇到 router-view 标签， 会使用 新路由对应的组件 进行渲染。

两种模式

配置路由模式

• hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
• history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。

参考：
Vue Router: API 参考
vue-router 深入学习（这篇文章分析的非常清晰，推荐）