vue-router 基本操作

前端路由，即由前端来维护一个路由规则。实现方式有两种，一种是利用 url 的 hash 值，javascript 通过 hashChange 来监听 url 变化；另一种就是 HTML5 的 History 模式，使 url 看起来像普通网站一样以/分割，没有#，但页面并没有跳转。

本次以 vue 的 vue-router 为例，介绍其日常的使用方法。

一、基本使用方法

vue 脚手架搭建成功后通过 npm 安装 vue-router

npm install --save vue-router

在 main.js 函数中通过使用引入 vue-router

import Vue from 'vue';
import VueRouter from 'vue-router';// 引入路由模块
import App from './app.vue';

Vue.use(VueRouter);// 加载路由模块

此处为便于演示在 views 下新建两个 vue 组件 index.vue 和 about.vue 两个文件，然后在路由文件 router.js 中，创建一个数组来定义路由匹配规则表，利用路由来映射相应组件。

const Routers = [
    {
        path:'/index',
        component:(resolve) => require(['./views/index.vue'],resolve)
    },
    {
        path:'/about',
        component:(resolve) => require(['./views/about.vue'],resolve)
    },
]

在路由列表中，可以在最后新加一项，当访问的路由不存在时，重定向到首页：

{
    path:'*',
    redirect:'/index'
}

注：上述写法异步实现了路由的懒加载（按需加载），如需要一次性加载所有组件可写为如下形式

{
    path:'/index',
    component:require('./views/index.vue')
}

二、路由跳转

vue-router 跳转页面有两种方式，第一种是使用 vue 内置的组件，如

<template>
    <div>
        <router-link to='/about'>跳转</router-link>
    </div>
</template>

router-link 常见属性包括

1. to 指定需要跳转的路径
2. tag 指定渲染成什么标,默认为 a 标签
3. replace 替换当前页面，不会留下历史纪录

第二种是在 js 里使用 router 实例跳转

his.$router.push('/user')

常用属性包括

1. push 添加指定路径到 history 中
2. replace 替换当前记录，替换后无法后退
3. go 在 history 中前进或后退的步数，参数为整数

三、路由传参

路由传参类似 ajax 请求中的参数传递，可以通过路径传参，即在 url 中携带参数，也可以通过 params 传递（类似 post 请求）,但是后者在新的路由中刷新时参数会丢失，所以此处只介绍第一种方式。
通过 url 进行路由传参常见两种方式

1./user?id=123456

常规的参数传递方式，在组件中可以通过

this.$router.push('/user?id=123456')

进行跳转,此处对参数没有硬性要求，参数为空仍可正常跳转。

2./user/123456

user 是固定，而 id '123456’是动态的参数。修改 id 后仍路由到同一个页面。这种方法需要在 router.js 中配置相关参数，

{
    path:'/user/:id',
    component:(resolve) => require(['./views/user.vue'],resolve)
}

由于配置的路由是'/user/:id',所以访问时路径中必须携带参数才能正常跳转到 user 页面，否则无法找到相应路由。
注：在跳转后的组件中通过 this.route可以获得路由的信息，日常使用时常用this.route.query 来解析 url 以获取参数值。

四、部分高级操作

vue-router 提供了导航钩子 beforeEach 和 afterEach 钩子，分别在路由即将改变前和改变后触发，导航钩子有 3 个参数

1. to 即将要进入的目标的路由对象
2. from 当前导航即将要离开的路由对象
3. next 调用该方法后，才能进入下一个钩子
   参考用例：

// token验证登陆
router.beforeEach((to,from,next) => {
    if(token) {
        next();
    }else {
        next('/login')
    }
})
// 切换后滑动条返回顶部
router.afterEach((to,from,next) => {
  window.scrollTo(0,0);  
})