vue-router使用

安装vue-router

//安装最新版本
npm install vue-router
//安装指定版本
npm install vue-router@^3.0.0
​

引入vue-router

//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
​
Vue.use(Router)
​
export default new Router({
    routes: [{
        path: '/',
        name: 'login',
        component: () =>
            import ('@/views/son-page')
    }]
})

//main.js
import router from './router/index'
new Vue({
    router,//使用路由
    render: h => h(App),
}).$mount('#app')

路由跳转

//
//在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push
//例如
let router=this.$router
// 带有路径的对象
router.push({ path: '/users/eduardo' })
​
// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
​
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

路由传参

在跳转到目标页面的同时,携带需要传递的参数:以路由组件的props为例

0. 配置路由:在路由配置里面配置目标页面的props属性,将$route.params 或$route.query中的参数传递给目标页面的props
1. 配置目标页面的props:接收路由传递过来的参数

 //router/index.js 路由配置
​
​
new Router({
    routes: [
        //跳转目标路由配置
        {
        path: '/',
        name: 'login',
        component: () =>
            import ('@/views/son-page'),
        //
        props($route)=> { 
            return  {name:$route.params.key1,id:$route.params.key2,} 
        }
    }]
})

//target.vue 目标文件配置
​
<script>
    export default {
        
          props:{
            //路由中props返回的对象中的key保持一致
            name:'',
            //参数2
            id:''
        }
    }
</script>

//currentPage.vue 目标页面跳转
this.$router.push({ name: 'login', params: { key1: 'eduardo' ,key2:'vv'} })

路由守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航,可以用来判断某个用户是否有权限进入某个页面

路由前守卫

to: 即将要进入的目标路由

from: 当前导航正要离开的路由

next: 继续跳转的方法

import router from './router/index'
//路由前守卫
router.beforeEach((to, from, next) => {
  if (!token && to.name !== 'login') {
    next({ name: 'login' })
  } else {
    next()
  }
})

全局后置钩子

全局后置钩子对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用

to: 即将要进入的目标路由

from: 当前导航正要离开的路由

router.afterEach((to, from) => {
  //修改页面标题
  window.title='修改标题'
})

注意事项

vue-router版本问题

0. 有时用4.0.0以上的版本会出现问题,需要将版本降到4.0.0

1. //执行以下指令,降低vue-router 的版本
   npm uninstall vue-router
   npm install vue-router@^3.1.0