07. vue-router嵌套路由

Posted songsongblue

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了07. vue-router嵌套路由相关的知识,希望对你有一定的参考价值。

嵌套路由用法

1.嵌套路由功能分析

  • 点击父级路由链接显示模板内容
  • 模板内容中又有子级路由链接
  • 点击子级路由链接显示子级模板内容
    技术图片

2.父路由组件模板

  • 父级路由链接
  • 父组件路由填充位
<p>
<router-link to="/user">User </router-link>
<router-link to="/register">Register</router-link>
</p>
<div>
<!--控制组件的显示位置-->
<router-view></router-view>
</div>

3.子级路由模板

  • 子级路由链接
  • 子级路由填充位
const Register = {
//使用模板字符串 `xxx`,支持回车
template: `<div>
<h1>Register组件</hl>
<hr/>
<router-link to="/register/tab1">Tab1</router-link>
<router-link to="/register/tab2">Tab2</ router-link>
<!--子路由填充位置-->
<router-view/>
</div>`
}

4.嵌套路由配置

  • 父级路由通过children属性配置 子级路由
const router = new VueRouter({
routes: [
{ path: ' /user', component: User },
{ path: '/register',
component: Register,
//通过children 属性,为/register 添加子路由规则
children: [
{ path: "/register/tab1', component: Tab1 },
{ path: '/register/tab2', component: Tab2 }
    ]
   }
 ]
})

以上是关于07. vue-router嵌套路由的主要内容,如果未能解决你的问题,请参考以下文章

Vue-Router(三):嵌套路由

Vue-router 子路由(嵌套路由)

Vue-router 子路由(嵌套路由)

vue-router路由嵌套与二级路由重定向

Vue第七天学习笔记之vue-router详解

Vue第七天学习笔记之vue-router详解