该篇文章可以帮助初学者快速掌握vue-router的基础使用，其中包含了路由的重定向、路由嵌套、路由的跳转方式、路由传参等知识点。

一、路由基础

// 首先要下载vue-router（如果使用的是脚手架在自定义中直接勾选即可）
yarn add vue-router@3 或 npm i vue-router@3

//工作中一般是在src下创建一个router/index.js
import Vue from "vue"
import VueRouter from "vue-router"
// 注册路由 （use方法会调用路由中的install方法会注册路由中的组件router-link和router-view）
Vue.use(VueRouter)

// 创建路由实例
const router = new VueRouter({
   routes = [
         // 路由重定向
         {path:"/",redirect："/layout/pageOne"}
         // 一级路由
         {path:"/login",component:Login},
         {path:"/register",component:Register}
         {path:"/layout",component:Layout,
          // 二级路由
          children:[
                  // 动态路由传参
                {path:"/pageOne/:key",component:PageOne},
                {path:"/pageTwo",component:PageTwo},
              ]
           }
         ]
    })

// 导出router 
export default router

// 在src下main.js中引入
import router from "@/router/index.js"

// 将router 挂载到vue的实例对象上

new Vue({
...,
router
}).$mount("#app")

二、路由跳转以及传参

2.1声明式导航跳转

    
   <router-link to="/path(跳转的路径)"></router-link>
   
   // 传参
    // 2.1.1查询参数传参
      <router-link to="/path(跳转的路径)/?key=vlaue"></router-link>
      
    // 2.1.2动态路由传参
    已在上述routes中的二级路由中设置动态路由
      <router-link to="/path(跳转的路径)/value"></router-link>

2.2编程式路由跳转

    2.2.1在组件使用：
    this.$router.push("/path")
    
    2.2.1传参
    简写方法：
    this.$router.push("/paht/?key=vlaue")
    
    完成写法:
    this.$router.push("/paht",{
        query:{
            key:vlaue
        }
      })
    
    
    2.2.2在js文件中使用：
     // 需要导入router 
     import router from  "@router/index.js"
     
     router.push("/path")
    
    2.2.2传参
    简写方法：
    // 动态路由中的属性已设置在routes的路由路径中
    this.$router.push("/paht/vlaue")
    
    完成写法:
    this.$router.push("/paht",{
        params:{
            key:vlaue
        }
      })

三、获取路由的参数

created(){
    // 在跳转到的组件内获取查询参数传递的参数
   this.$route.query.key

    // 在跳转到的组件内获取动态路由传递的参数
    this.$route.params.key
}

看完之后对你有帮助的话，点点赞吧！！！