当前位置:网站首页>嵌套(多级)childrn路由,query参数,命名路由,replace属性,路由的props配置,路由的params参数
嵌套(多级)childrn路由,query参数,命名路由,replace属性,路由的props配置,路由的params参数
2022-07-07 06:38:00 【勇敢*牛牛】
就算一次也好,我想在这颗星球上尽情奔跑。
配置路由规则,使用children配置项:
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写:/news
component:News
},
{
path:'message',//此处一定不要写:/message
component:Message
}
]
}
]
1. 跳转(要写完整路径):
<router-link to="/home/news">News</router-link>
query参数
路由嵌套:
// 创建一个路由器
const router = new VueRouter({
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
path: 'home-news',
component: News
},
{
path: 'home-message',
component: Message,
children: [
{
path: 'detail',
component: Detail
}
]
}
]
},
]
})
跳转路由并携带query参数,to的字符串写法
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带query参数,to的字符串写法 -->
<router-link :to="`/home/home-message/detail?id=${m.id}&title=${m.title}`">{
{
m.title}}</router-link>
</li>
</ul>
跳转路由并携带query参数,to的对象写法
<!-- 跳转路由并携带query参数,to的对象写法 -->
<router-link :to="{
path:'/home/home-message/detail',
query:{
id:m.id,
title:m.title
}
}">
{
{
m.title}}
</router-link>
根据组件来获取传递过来的信息
<ul>
<li>消息编号{
{
$route.query.id}}</li>
<li>消息标题{
{
$route.query.title}}</li>
</ul>
命名路由
作用:可以简化路由的跳转。
如何使用
- 给路由命名:
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}
简化跳转:
<!--简化前,需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后,直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>
<!--简化写法配合传递参数 -->
<router-link
:to="{
name:'hello',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
6.路由的params参数
配置路由,声明接收params参数
{ path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用占位符声明接收params参数 component:Detail } ] } ] }
传递参数
<!-- 跳转并携带params参数,to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数,to的对象写法 -->
<router-link :to="{ name:'xiangqing', params:{ id:666, title:'你好' } }" >跳转</router-link>
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!
- 接收参数:
$route.params.id
$route.params.title
7.路由的props配置
作用:让路由组件更方便的收到参数
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
// props:{a:900}
//第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
// props:true
//第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
props($route){
return {
id:$route.query.id,
title:$route.query.title
}
}
}
8.<router-link>
的replace属性
- 作用:控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式:分别为
push
和replace
,push
是追加历史记录,replace
是替换当前记录。路由跳转时候默认为push
- 如何开启
replace
模式:<router-link replace .......>News</router-link>
边栏推荐
- 硬核分享:硬件工程师常用工具包
- C语言指针(中篇)
- Some pit avoidance guidelines for using Huawei ECS
- Pytest+request+allure+excel interface automatic construction from 0 to 1 [familiar with framework structure]
- JVM 垃圾回收 详细学习笔记(二)
- 【Istio Network CRD VirtualService、Envoyfilter】
- MySql数据库-索引-学习笔记
- When inputting an expression in the input box, an error is reported: incorrect string value:'\xf0\x9f... ' for column 'XXX' at row 1
- Count the number of words in the string c language
- Mysql database transaction learning notes
猜你喜欢
Detailed learning notes of JVM memory structure (I)
数据在内存中的存储
C语言指针(特别篇)
Full link voltage test of the e-commerce campaign Guide
【istio简介、架构、组件】
Unittest simple project
How to pass the PMP Exam in a short time?
Selenium mouse sliding operation event
Reading notes of pyramid principle
C language pointer (Part 1)
随机推荐
Led analog and digital dimming
Data association between two interfaces of postman
JVM 内存结构 详细学习笔记(一)
正则匹配以XXX开头的,XXX结束的
Count the number of words C language
MySql数据库-索引-学习笔记
外部中断实现按键实验
徽商期货公司评级是多少?开户安全吗?我想开户,可以吗?
OpenGL 3D graphics rendering
Analysis of Hessian serialization principle
PMP certificate preparation experience sharing
Pycharm create a new file and add author information
Locust performance test 5 (analysis)
串口实验——简单数据收发
Unity Shader入门精要初级篇(一)-- 基础光照笔记
数据在内存中的存储
External interrupt to realize key experiment
Selenium mouse sliding operation event
Mysql数据库-锁-学习笔记
Synchronized underlying principle, volatile keyword analysis