vue-router3路由配置和使用，适配vue2，vue-router代码模版。只需要这篇文章就够了。

vue-router3路由配置和使用，适配vue2，vue-router代码模版。只需要这篇文章就够了。

前言

• 本文只适合vue2，不适合vue3，vue3对应的路由版本是vue-router@4
• 文章可能有点长，内容有点多，可以通过窗口左下角的目录自取需要的内容阅读

---

安装 vue-router3

npm i vue-router@3

基本配置

1⃣️ 在src目录下新建一个router文件夹，在文件夹里面创建一个index.js文件

2⃣️ 在main.js添加以下代码

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'

Vue.use(VueRouter)

new Vue({
  el:'#app',
  render: h => h(App),
  router
}).$mount('#app')

3⃣️ 在router文件夹下的index.js中就可以编写路由规则啦

代码模版：

import VueRouter from "vue-router";
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'

// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/自定义路由路径',
            component:路由路径对应的组件
        },
        {
            path:'/home',
            component:Home,
            // 二级路由编写
            children:[
                {   
                	// name 有点像路径别名，在多级路由下很有优势
        			// 表现在不用写一长串从父到子的路由地址
        			// 注意：写了name后依旧得写path
        			name:'news',
                    // 二级路由的path不需要带 '/'
                    path:'news',
                    component:News
                }
            ]
        }
    ]
})

如何使用路由做跳转？

1⃣️ 在页面中书写以下代码能实现路由跳转：

<router-link to="/home">点击跳转到Home组件</router-link>
<!-- 指定路由对应的组件渲染的位置 -->
<router-view />

2⃣️ 如何跳转二级路由❓

<router-link to="/home/news">NEWS</router-link>

3⃣️ 跳转路由时如何携带参数❓

利用query携带参数

字符串写法：

要跳转路由的地方：
<!-- 字符串写法（这里利用的是path来跳转） -->
<router-link to="/home/news?newsId=001&newsContent=这是一条新闻">NEWS</router-link>

路由对应的组件里：
<template>
  <div>
    <h2>NEWS组件</h2>    
    新闻编号：{{ $route.query.newsId }}
    新闻编号：{{ $route.query.newsContent }}
  </div>
</template>

对象写法：

要跳转路由的地方：
 <!-- 对象写法（这里利用的是name来跳转） -->
      <router-link :to="{
          name:'news',
          query:{
            newsId:'002',
            newsContent:'这是一条新闻'
          }
      }">跳转到News组件</router-link>

路由对应的组件里：
<template>
  <div>
    <h2>NEWS组件</h2>    
    新闻编号：{{ $route.query.newsId }}
    新闻编号：{{ $route.query.newsContent }}
  </div>
</template>

利用params携带参数

在router文件夹下的index.js中需要使用占位符声明接收params参数

import ......

export default new VueRouter({
    routes:[
        ......
        {
            path:'/home',
            component:Home,
            children:[
                {   
                    name:'news',
                    // 使用占位符声明接收params参数
                    path:'news/:id/:content',
                    component:News
                }
            ]
        }
    ]
})

字符串写法：

要跳转路由的地方：
<!-- 字符串写法（这里利用的是path来跳转） -->
<router-link to="/home/news/003/这是一条新闻">点击跳转到News组件</router-link>


路由对应的组件里：
<template>
  <div>
    <h2>NEWS组件</h2>    
    新闻编号：{{ $route.params.id }}
    新闻编号：{{ $route.params.content }}
  </div>
</template>

对象写法：

要跳转路由的地方：
 <router-link :to="{
          name:'news', // 这里只能用name，不能用path
          params:{
            id:'002',
            content:'这是一条新闻'
          }
      }">跳转到News组件</router-link>

路由对应的组件里：
<template>
  <div>
    <h2>NEWS组件</h2>    
    新闻编号：{{ $route.params.id }}
    新闻编号：{{ $route.params.content }}
  </div>
</template>

进一步学习

vue路由router的props配置

router-link 的replace属性

<router-link to="..." replace >...</router-link>

加上replace最直观的感受是跳转完组件后，没办法通过浏览器返回按钮直接返回到跳转前的组件了。🔙

编程式路由导航

没说的那么高大上，简言之就是把路由标签搬到js代码里而已。

<template>
  <div>
    <button @click="toNewsPage">跳转到News组件</button>
    <!--路由组件展示的位置-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    toNewsPage() {
      this.$router.push({
        name: "news", // 这里只能用name，不能用path
        params: {
          id: "002",
          content: "这是一条新闻",
        },
      });
    },
  },
};
</script>

缓存路由组件（保活路由组件）

作用：一般来说，不展示的路由组件会被立刻销毁。缓存路由组件就是为了让不展示的路由组件保持挂载，不被销毁，以待重写展示组件的时候，填写在组件中的信息能够恢复。

⚠️ 注意：include=""里面填写的是要缓存的组件的名称❗️

<keep-alive include="News">
        <router-view></router-view>
</keep-alive>

路由组件两个新的生命周期

<script>
export default {
  name: "News",
  mounted() {},
  // 路由组件在keep-alive包裹下才有的生命周期
  activated(){
    console.log('路由组件被激活了');
  },
  // 路由组件在keep-alive包裹下才有的生命周期
  deactivated(){
    console.log('路由组件被销毁了');
  }
};
</script>

⚠️ 注意：activated()和deactivated()只有在<keep-alive></keep-alive>包裹的时候才有效。因为在<keep-alive></keep-alive>中，我们正常的钩子函数就没办法执行了，这个时候activated()和deactivated()就会执行。

全局前置路由守卫和全局后置路由守卫

什么是路由守卫❓
说白了就是像「拦截器」的东西，在这里面可以做一些组件跳转前或组建跳转后的逻辑处理（比如用户身份鉴权）

全局前置路由守卫会在每一个路由组件被展示前调用，这时候可以在路由守卫里面去做一些js逻辑判断，来确保路由组件是不是真的要展示给用户看。

全局后置路由守卫是在路由组件被展示给用户看后才调用的

代码模版：

在router文件夹📁下的index.js中配置

import ......
// 创建并暴露一个路由器
const router =  new VueRouter({
    	......	
})

// 前置路由守卫
router.beforeEach((to,from,next)=>{
    // meta字段下面会讲
    if(to.meta.isAuth){
        console.log('需要鉴权')
        // 这里省略一百万行鉴权代码
        next()
    }else{
        next()
    }
})

// 后置路由守卫
router.afterEach((to,from)=>{
	......
})

export default router

前置路由守卫里面写的是一个回调函数，回调函数能接收到三个参数，分别是(to,from,next)，to能够展示路由去向，from能够展示路由来源，next是一个方法，让路由组件在前置路由守卫中处理完逻辑后能够继续走下去，展示to里面指向的路由组件

全局后置路由守卫同上，只是没有next参数

路由配置中的meta字段

meta字段能够在路由组件切换的过程中，传递用户的「元数据」，就是用户的「自定义」数据。这个数据可以供路由守卫鉴权用。

export default new VueRouter({
	routes:[
		{
			name:'home',
            path:'/home',
            component:Home,
            // 路由配置中的meta字段
            meta:{isAuth:true},
		}
	]
})

独享路由守卫

代码模版：

在router文件夹📁下的index.js中配置

// 创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {
            name:'home',
            path:'/home',
            component:Home,
			// 独享路由守卫
            beforeEnter:(to,from,next)=>{
                console.log('/home的独享路由守卫被调用')
                next()
            }
        }
    ]
})

组件内路由守卫

在路由组件里编写的路由守卫

<script>
export default {
  name: "Home",
  components: {},
  methods: {

  },
  // 组件内守卫
  // 通过路由规则，进入该组件时被调用
  beforeRouteEnter: (to, from, next)=>{
    next()
  },
  // 通过路由规则，离开该组件时被调用
  beforeRouteLeave: (to, from, next)=> {
    next()
  }
};
</script>

修改路由模式

将hash模式改成history

在router文件夹📁下的index.js中配置

// 创建并暴露一个路由器
const router =  new VueRouter({
	// 将`hash`模式改成`history`
    mode:'history',
    routes:[
        ......
    ]
})