本文介绍了Vue.js中的嵌套路由实现，通过示例展示了如何在HomeInfo组件中嵌套NewsInfo和MessageInfo组件，以及如何在router/index.js中配置相应的路由规则。在main.js中引入和配置路由器，并在App.vue中设置导航链接，最终实现了一个多级路由的运行效果。
路由组件pages/AboutInfo.vue
<template>
<div>
<h1>我是About内容</h1>
</div>
</template>
<script>
export default {
name: "AboutInfo"
}
</script>
路由组件pages/HomeInfo.vue使用嵌套路由
<template>
<div>
<h1>我是Home内容</h1>
<router-link to="/home/news">NewsInfo</router-link>
<router-link to="/home/message">MessageInfo</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "HomeInfo"
}
</script>
路由组件pages/MessageInfo.vue
<template>
<div>我是MessageInfo组件内容</div>
</template>
最低0.47元/天 解锁文章
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
