这篇文章主要讲解了“vue3怎么使用vue-router及路由权限拦截”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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至此就完成啦
cnpm i vue-router@next -D创建Router对象和路由配置——routerIndex.js
import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"
// 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）
import countIndex from "../pages/count/countIndex.vue";
import langshanIndex from "../pages/langshan/langshanIndex.vue";
// 2. 定义路由配置
const routes = [
{
path: "/",
redirect: '/countIndex'
},
{ path: "/countIndex", component: countIndex },
{ path: "/langshanIndex", component: langshanIndex },
];
// 3. 创建路由实例
const router = createRouter({
// 4. 采用hash 模式
history: createWebHashHistory(),
// 采用 history 模式
// history: createWebHistory(),
routes, //使用上方定义的路由配置
});
export default router
//导出routerRouter 当做插件引用进来——main.js
import { createApp } from 'vue'
import routerIndex from './router/routerIndex' // 引入路由对象实例
import App from './App.vue'
const app = createApp(App)
// 使用配置的路由
app.use(routerIndex)
app.mount('#app')感谢各位的阅读，以上就是“vue3怎么使用vue-router及路由权限拦截”的内容了，经过本文的学习后，相信大家对vue3怎么使用vue-router及路由权限拦截这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
