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()，直接添加路由表的数组。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
到此这篇vue3.0路由守卫（vue路由守卫导航栏权限配置）的文章就介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/21013.html