Vue3 如何使用 vue-router 以及路由权限拦截

Posted 2021-12-30 cookcyq

vue3 使用 vue-router 的方式和 vue2 基本一样，只不过初始化路由时需要用到一些函数来定义而已，另外 vue-cli 工具本身在创建 vue3 项目时就可以根据提示来进行安装配置 vue-router ， 所以本篇只是针对那些忘记安装的小伙伴。
第一步肯定是要先安装啦：npm install vue-router@4
接着我们在根目录 src 下创建 router 目录并定义 index.js
下面是 src/router/index.js 的代码

// 1. 引入这两个函数来初始化路由
import  createRouter, createWebHashHistory  from "vue-router"
// 2. 配置路由
const routes = [
  
    path: '/info',
    name: 'info',
    component: () => import('@/pages/info'),
    // 路由元信息，随你怎么定义，笔者一般采用这种方式来定义路由权限然后结合路由拦截，
    // 下面的 auth：true 表示需要授权登录才可以进入此页面。
    meta:        
      auth: true,
    ,
  ,
  
    path: '/login',
    name: 'login',
    component: () => import('@/pages/login'),
    meta: 
      auth: false,
    ,
  
]
// 3. 创建路由实例
const router = createRouter(
  history: createWebHashHistory(), // 表示使用 hash 模式，即 url 会有 # 前缀
  routes
)
// 4. 你还可以监听路由拦截，比如权限验证。
router.beforeEach((to, from, next) => 
  // 1. 每个条件执行后都要跟上 next() 或 使用路由跳转 api 否则页面就会停留一动不动
  // 2. 要合理的搭配条件语句，避免出现路由死循环。
  const token = cookies.get('token')
  if (to.meta.auth) 
  	if (!token) 
  		return router.replace(
	      name: 'login'
	    )
  	
  	next()
   else 
    next()
  
)
export default router

接下来在项目的入口文件 main.js 里面引入 router/index.js

// main.js
import  createApp  from 'vue'
import router from '@/router/index.js' // 引入
import App from '@/App.vue'
const app = createApp(App)
app
.use(router)
.mount('#app')
export default app

至此就完成啦