vue路由复用

使用多个<router-view>可以复用路由，但是每个<router-view>要带一个name属性

更改路由，配置默项和复用项，定义复用项的name

例子：

App.vue

<template>
  <div id="app">
    <common-header></common-header>
     <router-view/>
     <div class="flex_ctn">
       <div class="flex_item">
         <router-view name="one"></router-view>
       </div>
       <div class="flex_item">
         <router-view name="two"></router-view>
       </div>
       <div class="flex_item">
         <router-view name="three"></router-view>
       </div>
     </div>
  </div>
</template>

<script>
import CommonHeader from '../src/components/CommonHeader.vue'
export default {
  name: 'App',
  components:{
    CommonHeader
  }
}
</script>

 

路由

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
import Home from '../../view/Home.vue'
import Test from '../../view/Test.vue'
import News from '../../view/News.vue'
import One from '../components/left/One.vue'
import Two from '../components/left/Two.vue'
import Three from '../components/left/Three.vue'
export default new Router({
  routes: [
    {
       name:"Home",
       component:Home,
       path:"/",
       children:[
         {name:"One",path:"/home/one",component:One},
         {name:"Two",path:"/home/two",component:Two},
         {name:"Three",path:"/home/three",component:Three},
       ],
       redirect:"/home/one"
    },
    {
      name:"Test",
      components:{
        default:Test,           //默认路由
        "one":One,             // 复用路由
        "two":Two,            // 复用路由
        "three":Three       // 复用路由
      },
      path:"/test"
   },
   {
    name:"News",
    component:News,
    path:"/news"
 },
 {
 
  path:"*",
  redirect:"/"
}
  ],
  mode:"history"
})

 

转载于:https://www.cnblogs.com/luguankun/p/10743925.html