Vue路由-嵌套路由

1.什么是嵌套路由

是否是嵌套路由主要是由页面结构来决定的,实际项目中的应用页面,通常由多层嵌套的组件组合而成。

简而言之,嵌套路由就是在路由里面嵌套它的子路由。

嵌套子路由的关键属性是children,children也是一组路由,相当于前面讲到的routes一样地去配置路由数组。

每一个子路由里面可以嵌套多个组件,子组件又有路由导航和路由容器。

2.嵌套路由示例
Vue
<template>
  <div id="app">
    <router-link to="/user/about" tag="button">关于公司</router-link>
    <router-link to="/user/contact" tag="button">联系我们</router-link>
    <router-view />
  </div>
</template>
<template>
    <div id="app">
        <h1>北京dsadadas科技有限公司</h1>
    </div>
</template>
<template>
    <div id="app">
        <h1>联系我们</h1>
        <p>公司位于北京市海定区中关村科技园内,主营业务包括餐饮娱乐</p>
    </div>
</template>
import user from '@/components/user.vue'
import about from '@/components/about.vue'
import contact from '@/components/contact.vue'

Vue.use(Router)

export default new Router({

  routes: [
    {
      path: '/user',
      component: user,
      children: [
        { path: 'about', component: about },
        { path: 'contact', component: contact }
      ]
    }
  ]
})
订阅评论
提醒
0 评论
最旧
最新 最多投票
内联反馈
查看所有评论
滚动至顶部