Vue之多个router-view应用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26641781/article/details/83860774

• 在App.vue添加两个router-view，使用name属性指定对象的页面

<template>
  <div id="root">
    <div>
      <router-link to="/home">首页 \</router-link>
      <router-link to="/news">新闻 \</router-link>
      <router-link to="/about">关于</router-link>
    </div>
    <router-view class="left" name="nav"></router-view>
    <router-view class="right" name="con"></router-view>
  </div>
</template>

• 在router.js指定路径，在components添加：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Error from './views/Error.vue'
/* import About from './views/About.vue' */
import About1 from './views/About1.vue'
import About2 from './views/About2.vue'
import AboutNav from './views/AboutNav.vue'
import AboutCon from './views/AboutCon.vue'
/* import News from './views/News.vue' */
import NewsNav from './views/NewsNav.vue'
import NewsCon from './views/NewsCon.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: "/",
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/news',
      name: 'news',
      components: {
        nav:NewsNav,
        con:NewsCon
      }
    },
    {
      path: '/about',
      name: 'about',
      components: {
        nav:AboutNav,
        con:AboutCon
      },
      children:[
        {
          path: 'about1',
          component: About1
        },
        {
          path: 'about2',
          component: About2
        }
      ]
    },
    {
      path: '*',
      name: 'error',
      component: Error
    },
  ]
})