Vue路由使用（router）

介绍

**vue-router相当于vue内部跳转链接，将需要切换的页面在vue-router里注册，在项目里配置就能完成

页面的切换

，它不仅能完成项目的切换，还能实现

参数的传递

，它还有个很重要的功能

路由导航守卫

（导航守卫分为前置导航守卫，后置导航守卫，组件内置导航守卫，常用就是前置导航守卫，设置用户登录可访问的界面和未登录可访问的界面，也相当于二次拦截，（

axios请求拦截器是第一次拦截

））。**

路由跳转和传参

重点：
在vue-router中，有两大对象被挂载到了实例

this

；

$route

（只读、具备信息的对象）；

$router

（具备功能的函数）；

• 1.router-link（类似a标签）

路由配置：

// 路由配置{path:'/pkproperties',// 路径name:'pkproperties',// 路由名，path路径必写，用name跳转的时候是根据name名找到path进行跳转component:()=>import('@/views/pkproperties'),// 组件（组件文件名为index的可省略）,路由懒加载写法redirect:'',// 路由重定向，就是当一个页面需要切换多个路由的时候，这里面填的是首次进入页面展示的路由组件地址hidden:true，
   children:[]// 嵌套路由，当一页有很多路由需要切换的时候，就需要用到嵌套路由},// 组件内使用<router-link to="/pkproperties">点击跳转</router-link>// path路径跳转<router-link to="{name:'pkproperties',query:{id:1}}">点击跳转</router-link>// 使用命名路由name跳转

传参配置：

{path:'/pkproperties',// 路径name:'pkproperties',// 路由名，path路径必写，用name跳转的时候是根据name名找到path进行跳转component:()=>import('@/views/pkproperties'),// 组件（组件文件名为index的可省略）hidden:true},// 使用命名路由传参，可以传递基本数据类型和数组和对象<router-link to="{name:'pkproperties',query:{id:1}}">点击跳转</router-link>// name名跳转,query传递参数<router-link to="{name:'pkproperties',params:{id:1}}">点击跳转</router-link>// name名跳转,params传递参数this.$route.query.id // 获取传递的参数（.传递参数的键名）this.$route.params.id // 获取传递的参数（.传递参数的键名）

• 2.编程式路由跳转(最常用的，不受时机、条件的限制)

路由配置：

{path:'/pkproperties',// 路径name:'pkproperties',// 路由名，path路径必写，用name跳转的时候是根据name名找到path进行跳转component:()=>import('@/views/pkproperties'),// 组件（组件文件名为index的可省略）hidden:true},

传参配置：

methods：{onSkipTransferParameters(){// params传参this.$router.push({name:"pkproperties",params:{name:'小明',id:1,},});onSkipTransferParameters(){// query传参this.$router.push({name:"pkproperties",query:{name:'小明',id:1,},});}// 获取传递的参数this.$route.params.name // 获取就是在当前跳转的组件内调用$route实例，是用params就.params.键名获取值this.$route.query.name // 获取就是在当前跳转的组件内调用$route实例，是用query就.query.键名获取值

**

query

传参在刷新界面后传递的

数据不会丢失

，

params

传递的参数刷新界面后

会丢失参数

。**

• 3.路由重定向redirect需要用到传参的业务

{path:"/",redirect:{path:"pkproperties",query:{Pid:'1'}}},{path:"pkproperties",component:()=>import("../views/pkproperties")}

解决路由重复点击路由沉积的问题

// 把这段代码直接粘贴到router/index.js中的Vue.use(VueRouter)之前const originalPush =VueRouter.prototype.push;VueRouter.prototype.push=function(location){returnoriginalPush.call(this, location).catch(err=>{})};

注意：一定要写在

Vue.use(VueRouter)

之前否则无效

解决路由跳转后不能回到顶部的页面顶部的问题

在跳转到的组件里配置下面的代码即可

mounted(){/**
     * 路由跳转回到顶部
     */// chrome
    document.body.scrollTop =0;// firefox
    document.documentElement.scrollTop =0;// safari
    window.pageYOffset =0;},

路由导航守卫和案例展示

• 路由前置导航守卫（beforeEach）

// 全局导航守卫beforeEach
router.beforeEach((to, from, next)=>{// to要到哪个路由去// from从哪个路由来// next下一步（无论失败与否都要调用，否则会阻止程序继续执行）}

案例1中使用（

拦截未登录用户和白名单设置

）：

permission.js文件下配置（permission文件最好和main文件在同一目录下创建）

import router from'./router'import{ getToken }from'@/common/TokenStore'const whiteList =['/login','/register']// 白名单登录注册界面无需验证Token是否登录直接放行// 全局导航守卫beforeEach
router.beforeEach((to, from, next)=>{// 白名单中路由直接放行if(whiteList.indexOf(to.path)!==-1){next()return}// 判断需要登录身份认证的路由const token =getToken()// 获取tokenif(token){next()}else{next(`/login`)// 如果登录不存在，重定向到登录界面}})

main.js文件下引入即可

import'./permission'// 引入即可

案例2中使用（设置Tokne失效实现拦截，Tokne失效就导航会登录界面重新登录，未失效就不执行操作）

login.vue（登录组件登录成功后保存Token和保存获取Token的当前时间戳在本地）

methods:{// 登录handleLogin(){this.$axios.post('/api/Login',{username:this.loginForm.username,// 用户名password:this.loginForm.password // 密码}).then(res=>{if(res.data.code !=0)returnthis.$message.error(res.data.message)// code 不等于0,返回失败的结果，（这的判断参数是根据后端返回的数据进行的，不是固定的）if(res.data.code ==0){this.$message.success('登录成功')// 存储token开始时间
            window.localStorage.setItem('tokenStartTime',newDate().getTime())// 存储token
            window.localStorage.setItem('token',res.data.data.token)this.$router.push('/home/ks')}else{this.$message.error('登录失败')}})}}

permission.js（将保存的Token获取时间和当前时间进行一个差值的比较，如果小于我们设定的Token失效时间，就证明登录没有过期可继续访问，如果大于就登录过期Token失效需要重新登录获取。）

// 导入element提示语的组件可以去element-ui查看用法，这是按需引入的import{
    Message
}from'element-ui'// 添加请求拦截器// 拦截器的第二部分，第一部分在main.js里面
router.beforeEach((to, from, next)=>{// 获取存储localStorage的tokenlet token = window.localStorage.getItem('token')// 获取存储token的开始时间const tokenStartTime = window.localStorage.getItem('tokenStartTime')// 后台给出的token有效时间为一天，这个是后端给的时间以后端为准const timeOver =86400000// 获取当前时间let date =newDate().getTime()// 当前时间减去获取Token的时间如果大于说明是token过期了if(date - tokenStartTime > timeOver){
      token =null// Token过期赋值为null}// 如果token过期了if(!token){if(to.path =='/login')returnnext()// 注意要import element的Message组件
    Message.error("登录状态过期，请重新登录")returnnext('/login')// 如果token没有过期，又是选择了登录页面就直接重定向到首页，不需要重新输入账户密码}elseif(to.path =='/login'){returnnext('/home/ks')}next()})exportdefault router

• 全局后置守卫（afterEach）

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

• 组件内守卫（相当于给组件增加生命周期）

beforeRouteEnter 进入组件之前
beforeRouterEnter(to,from,next){}

beforeRouteUpdate 组件被复用时调用
beforeRouterUpdate(to,from,next){}

beforeRouteLeave 离开组件时调用
beforeRouteLeave(to,from,next){}

访问外部链接

• vue内部跳转可以通过vue-router中的this.$router.push()和rout-link 来实现，这里在说一下想要访问外部链接的方法

1.window.location.href = url（不新开一个页面，直接在当前页面跳转）

methods：{onSkip(){
    window.location.href ="http://xxx.xxx.xxx"}}

2.window.open(“url”, “_blank”)（打开一个新页面跳转）

methods：{onSkip(){
    window.open("https://xxx.xxx.xxx/","_blank");}}

3.手动创建a标签，然后默认点击

var a = document.createElement("a");
     a.setAttribute("href","www.baidu.com");
     a.setAttribute("target","_blank");
     a.click();