vue router 主要用于url地址配置，实现更改浏览器历史访问记录、页面跳转、页面跳转不刷新、页面访问权限拦截、滚动条滚动到指定位置、设置界面title等功能。
1. 如何使用vue router？
- 引入vue-router核心脚本 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
- 创建路由组件，简单理解为创建两个界面
- 配置路由映射（组件和路径映射关系），通过 new VueRouter() 配置路由，然后挂载到 new Vue() 上
- 使用路由
<router-link>和<router-view>
<router-link>属性：to（跳转路径、参数配置。
to="home"
:to="{ name: 'user', params: { userId: userId }}"
:to="{ path: 'register', query: { plan: 'private' }}"
// params传参，一定要name，query可以配合name或path使用
query路径：/login?id=10&name=li
params路径：/login/10/li
// replace或调用router.replace
<router-link :to="{ path: '/abc'}" replace></router-link>
// append添加当前路径拼接，如当前路径为/a,则最新路径为/a/abc
<router-link :to="{ path: '/abc'}" append></router-link>
// tag渲染当前标签,即<li></li>
<router-link :to="{ path: '/abc'}" tag="li"></router-link>）、replace、append、tag、active-class、exact、event
<!DOCTYPE html>
<html>
<body>
<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>
</body>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 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')
</script>
</html>
2. vue-router使用及配置
通过 new VueRouter（{}) 去构建路由对象，配置参数有： routes、mode、base、linkActiveClass、linkExactActiveClass、scrollBehavior、parseQuery/stringQuery、fallback
- routes
var routes = [{
path: string, // 路由路径，相对路径（不带'/'）会拼接父级路由，绝对路径（带'/'）是配置的完整路由
component: Component, // 组件,把组件放在<router-view></router-view>标签显示
name: string, // 命名路由，当有多个组件routes对象时可显示多个<router-view></router-view>、用于pramas传参的引入 pramas必须用name来引入
components: { [name: string]: Component }, // 命名视图组件
redirect: string | Location | Function, // 地址重定向
props: boolean | Object | Function, // 组件参数
alias: string | Array<string>, // 使用路由别名
children: Array<RouteConfig>, // 嵌套路由
beforeEnter: (to: Route, from: Route, next: Function) => void, // 进入某个页面前
meta: any, // 面包屑、到此路由所需要的 权限 角色、路由是否采用 缓存、此路由进入页面的标题等信息
caseSensitive: boolean, // 匹配规则是否大小写敏感？(默认值：false)
pathToRegexpOptions: Object // 编译正则的选项
}];- mode 路由模式：
histroy:localhost:8080/user/list
hash:localhost:8080/#/user/list（默认）
- base，基本的路由请求的路径，设置后路由自定加，如：base: '/app/',url之后加上/app/
- linkAvtiveClass, 选中样式，还可以配置<router-link>标签属性'active-class'使用或exact
- linkExactActiveClass，和linkActiveClass使用一样，区别在于linkExactActiveClass在精准配置，必须匹配所有路径
- scrollBehavior，滚动行为
3. 路由实例方法使用 ，对路由历史操作有： router.currentRoute、router.push、router.replace、router.go、router.back、router.forward，对路由跳转过程拦截有：router.beforeEach、router.beforeResolve、router.afterEach
- 历史操作：
router.currentRoute：获取当前路由信息
router.push： 相当于历史记录添加一条记录
router.replace：历史路由替换
router.go：跳转到指定第几个路由
router.back：跳转返回第几个路由
router.forward： 向前跳转第几个路由
- 跳转拦截：
router.beforeEach((to, from, next) => {
// to:进入路由对象、form：当前导航即将离开的路由，next：执行完了
let token = router.app.$storage.fetch("token");
let needAuth = to.matched.some(item => item.meta.login);
if(!token && needAuth) return next({path: "/login"});
next();
})
router.beforeResolve((to, from, next) => {
// 和before一样
})
router.afterEach((to, from) => {
// router方法是在路由进入之后触发
})