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

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

至此就完成啦
另外笔者还整理了 Vue3 学习指南总结，有兴趣的话可以去瞧一瞧。

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

面试考问Vue Router 的路由模式，这个回答令我直接出局！
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
你真的理解 Vue Router 的路由模式吗？
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
vue admin 动态路由权限管理
主要思路通过后端接口返回数据进行判断 (通过后端实现的权限管理有许多种),在这里我们主要通过关键字即匹配前端路由meta.menu值来实现权限管理通常会把路由权限列表存至vux中箭头所指的便 ...
Vue3中的Vue Router初探
对于大多数单页应用程序而言,管理路由是一项必不可少的功能.随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的. Vue3中的许多更改都会稍微改变 ...
vue router children 路由变了组件没变_Vue.js从零开始——路由（2）
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
注意避坑，Vue Router 4: 路由参数在 created/setup 时不可用
有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考 ...
Vue Router 命名路由、（嵌套）命名视图
命名路由在Vue Router中除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...

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

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

最新文章

热门文章