vue3.0路由守卫（vue路由守卫导航栏权限配置）

科技前沿 • 2025-04-17 07:13 • 阅读 48

大家好，我是讯享网，很高兴认识大家。

 <div id="navCategory"></div>

vue3.0取消了2.0部分api，所以路由跳转传值方式有所不同。

这里主要讲编程式导航，也就是router.push(location, onComplete?, onAbort?)

vue3.0新增API：useRouter和useRoute

1.首先在需要跳转的页面引入API—useRouter

2.在跳转页面定义router变量

3.用router.push跳转页面

4.如果有参数的话，在接收页面引入API–useRoute

5.在接收页面定义变量route，获取传过来的变量

1.如果提供了path，params会被忽略，但query没有这种情况，此时需要提供路由的name或手写完整的带有参数的path

2.上述规则同样适用于router-link组件的to属性

3.如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个/users/1->/users/2)，你需要使用[这里是代码018]来响应这个变化 (比如抓取用户信息)

来看一下vue3.0的路由(vue-router)，在看vue3.0路由之前，我们先来和vue2.0的路由做个对比，看看现在两者之间的区别。

1、从引入来说

讯享网

vue2.0 ，通过vue-router直接引入vueRouter

vue3.0，通过vue-router引入createRouter, createwebHashHistory | createWebHistory

2、创建实例

vue2.0，直接创建vueRouter实例

vue3.0，调用createRouter方法

3、从路由跳转

vue2.0，直接$router

vue3.0,调用useRouter方法

上面我们看了vue3.0的vue2.0的区别，那么接下来

我们看看vue3.0路由(router的写法)

1、路由表配置

创建router.ts，在其中写路由

2、路由出口

创建router下的index.ts

3、注入项目

上面就是vue-router的引入以及简单配置，那么接下来看看vue-router的页面跳转及传参

1、页面跳转及传参、

2、接参

以上内容就是vue-router里面的参数以及页面跳转，参数，接参的方式。其中路由中重定向(redirect)，路由守卫并没有变化。那么我们来看看路由守卫的前置守卫

路由守卫-前置守卫(beforeEach)

注意哦：

vue3.0中的addRoute()添加的是路由对象，而不是整个路由数组。

vue2.0是addRoutes()，直接添加路由表的数组。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。