2025年vue路由守卫控制页面跳转（vuerouter路由守卫）

科技前沿 • 2025-05-10 13:10 • 阅读 44

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

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

vue-router 本质是一个第三方的包用的时候需要下载

详细步骤 （7步法）：

创建路由规则数组（需要准备切换的页面组件）把准备好的页面组件引入到main.js中

当url的hash值路径切换，显示规则里对应的组件

实现路由内容的地方，引入组件时写到需要引入的地方需要注意的是，使用vue-router控制路由则必须router-view作为容器。（可以先引入根组件App.vue中进行自测）

注意: 一切都要以url上hash值为准

代码如下：

router-link好处 : 自带激活时的类名, 可以做高亮

在router-link上的to属性传值, 语法格式如下 :

(方式一)

to=/path?参数名=值

例：

对应页面组件接收传递过来的值

$route.query.参数名

讯享网

接收数据：$route.query.name

(方式二)

to=“/path/值” (需在路由规则里配置/path/:参数名)

例：

配置：

对应页面组件接收传递过来的值（注意动态参数需要用params接收）

$route.params.参数名

接收数据：$route.params.username

用JS代码来进行跳转

语法: path或者name任选一个

$router : 是路由操作对象，只写对象

$route : 路由信息对象，只读对象

$ router操作路由跳转

$route读取路由参数接收

path 和 name路由跳转方式，都可以用query传参

使用path方式跳转路由 path会忽略params 所以path不能和params一起使用

推荐使用name和query方式实现路由跳转

params传参，push里面只能是 name:‘xxx’,不能是path:‘/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

通过params传参

==注意：==这里使用name路由跳转方式路径不需要加因为它只是个名字

另一个页面接收:

这里使用params传参就需要写params接收

this.$route.params.id

通过query传参

另一个页面接收

query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数

uery传参

另一个页面接收

总结：query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数

params相当于POST请求，参数不会在地址栏中显示

到此这篇关于Vue实现路由跳转的3种方式的文章就介绍到这了,更多相关Vue路由跳转方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！