vue路由

最新推荐文章于 2024-10-18 17:49:11 发布

挽风莬

最新推荐文章于 2024-10-18 17:49:11 发布

阅读量130

点赞数

文章标签： vue.js html html5

本文链接：https://blog.csdn.net/m0_60499747/article/details/120828754

版权

本文详细介绍了Vue.js路由的使用，包括嵌套路由、参数传递、命名路由、params参数、编程式导航、重定向与别名、路由模式以及路由守卫。重点讲解了如何配置和操作路由规则，以及不同场景下的路由控制策略。

摘要由CSDN通过智能技术生成

一、嵌套路由（多级路由）

1.配置路由规则，使⽤children配置项：

routes:[

 {

path:'/home', //路径

 component: Home, //组件

 children: [ //通过children配置⼦路由

 {

 path:'message', //此处⼀定不要写：/message

 component: Message,

 },

 {

 path:'news', //此处⼀定不要写：/news

 component: News,

 }

 ]

 },

 {

 path:'/about',

 component: About

 }

 ]

2.跳转（要写完整路径）：

<!--to里面一定要有完整路径-->

<router-link to="/home/message">消息</router-link>

二、路由传参数

1.传递参数

<!--跳转并携带query参数，to的字符串写法-->

<router-link :to="'/home/message/details?id=1'">跳转</router-link>

<!--跳转并携带query参数，to的对象写法-->

<router-link :to="{path : '/home/message/details',query:{

id:10

 }

}">跳转</router-link>