vue router-view 多个视图嵌套 和 命名router-view

版权声明：Yangliwei 版权所有 https://blog.csdn.net/qq_32674347/article/details/84844511

多个router-view视图嵌套：

1，除了app.vue中的router-view之外，还有其他的嵌套在router-view中的router-view视图，子路由写在router.js children中

app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Main.vue

<template>
<router-view/>
</template>

路由router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import User from './views/User.vue'
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children:[{
        path:'article',
        // 单个router-view用：component
        component: About
      }
      }]
    }
  ]
})

命名router-view 注意components不是component 

main.vue

<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

router.js  （默认的router-view是default，自己命名的就写自己定义的名称）

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}