一、嵌套路由（多级路由） 1. 配置路由规则
使用 children 配置项
routes: [{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [{ //通过children配置子级路由
path: 'news', //此处没有 /
component: News
},
{
path: 'message', //此处没有 /
component: Message
}]
}]
<router-link to="/home/news">News</router-link>
嵌套路由
给 home 通过 children 配置子级路由path里面不加
index.js/component 并没有s，因为都是一个组件
import VueRouter from "vue-router";
// 引入组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
// 创建并暴露一个路由器
export default new VueRouter({
routes: [{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [{ //通过children配置子级路由
path: 'news', //此处没有 /
component: News
},
{
path: 'message', //此处没有 /
component: Message
}]
}]
})
显示 news 内容的组件
News.vue
<template>
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
</template>
<script>
export default {
name: "myNews",
};
</script>
显示 message 内容的组件
Message.vue
<template>
<div>
<ul>
<li><a href="/message1">message001</a> </li>
<li><a href="/message2">message002</a> </li>
<li><a href="/message/3">message003</a> </li>
</ul>
</div>
</template>
<script>
export default {
name: "myMessage",
};
</script>
注意路径要写全，
Home.vue/home/news、/home/message
<template>
<div>
<h2>Home组件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "myHome",
};
</script>
方法一：to 的字符串写法，v-bind 绑定 to，地址和值用模板字符串包裹。
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}！`">{{ m.title }}</router-link>
方法二：to 的对象写法，v-bind 绑定 to，在对象中配置
path和query，path 是路径，query 里面是参数。
<router-link :to="{
path: '/home/message/detail',
query: {
id: m.id,
title: m.title
}
}">{{ m.title }}</router-link>
$route.query.id
$route.query.title
路由的query参数
在 index.js 的 Message 中添加 Detail 子级
index.js
import Detail from '../pages/Detail.vue'
...
{
path: 'message', //此处没有 /
component: Message,
children: [
{
path: 'detail', //此处没有 /
component: Detail
},
]
}
一般采用对象写法，可读性高to 要用 v-bind 绑定path 用于配置路径query 里面传递参数
Message.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}！`">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
path: '/home/message/detail',
query: {
id: m.id,
title: m.title
}
}">
{{ m.title }}
</router-link>
</li>
</ul>
<hr />
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "myMessage",
data() {
return {
messageList: [
{ id: "001", title: "消息001" },
{ id: "002", title: "消息002" },
{ id: "003", title: "消息003" },
],
};
},
};
</script>
接收参数，呈现在页面
Detail.vue
<template>
<ul>
<li>消息编号：{{$route.query.id}}</li>
<li>消息标题：{{$route.query.title}}</li>
</ul>
</template>
<script>
export default {
name: "myDetail",
mounted() {
console.log(this.$route);
},
};
</script>
2. 如何使用可以简化路由的跳转
给路由命名
routes: [{
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>
配置路由，声明接收 params 参数
routes: [{
path: '/home',
component: Home,
children: [{
path: 'news',
component: News,
{
component: Message,
children: [{
name: 'xiangqing'
path: 'detail/:id/:title', //使用占位符声明接收params参数
component: Detail
}]
}
}]
}]
to 的字符串写法
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link>
to 的对象写法
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link :to="{
name: 'xiangqing',
params: {
id: m.id,
title: m.title
}
}">
{{ m.title }}
</router-link>
3. 接收参数注意：路由携带 params 参数时，若使用 to 的对象写法，则不能使用 path 配置，必须使用 name 配置！
$route.params.id
$route.params.title
路由的params参数
index.js
routes: [{
path: '/home',
component: Home,
children: [{
path: 'news',
component: News,
{
component: Message,
children: [{
name: 'xiangqing'
path: 'detail/:id/:title', //使用占位符声明接收params参数
component: Detail
}]
}
}]
}]
Message.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link> -->
<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{
name: 'xiangqing',
params: {
id: m.id,
title: m.title
}
}">
{{ m.title }}
</router-link>
</li>
</ul>
<hr />
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "myMessage",
data() {
return {
messageList: [
{ id: "001", title: "消息001" },
{ id: "002", title: "消息002" },
{ id: "003", title: "消息003" },
],
};
},
};
</script>
Detail.vue
<template>
<ul>
<li>消息编号：{{$route.params.id}}</li>
<li>消息标题：{{$route.params.title}}</li>
</ul>
</template>
<script>
export default {
name: "myDetail",
mounted() {
console.log(this.$route);
},
};
</script>
2. 三种写法让路由组件更方便的收到数据
第一种写法：props 的值为对象。该对象中的所有 key-value 都会以 props的形式传给 Detail 组件。
props:{a: 1, b: 'hello'}
第二种写法，值为布尔值。若布尔值为真，就会把该路由组件收到的所有 params 参数，以 props 的形式传给 Detail 组件。
props: true
props的第三种写法，值为函数。该函数返回的对象中每一组 key-value 都会通过 props 传给 Detail 组件。
props($route){
return {
id: $route.query.id,
title: route.query.title
}
}
不积跬步无以至千里 不积小流无以成江海
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）