个人笔记-----Vue中多个router-view应用【如有不对，欢迎指正】

詩酒趁年华

于 2019-05-02 20:37:27 发布

阅读量4.9k

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/sinat_42664398/article/details/89764636

版权

vue 专栏收录该内容

29 篇文章

订阅专栏

博客介绍了单个和多个区域设置路由的区别。单个区域变化无需设置属性，设置路由时采用特定方式；多个区域需设置属性，设置路由时也有特定方式，且要在特定处配置，还涉及对象及属性值对应问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单个 <router-view/> 和多个 <router-view/> 的区别，
单个 <router-view/> 只是一个区域的变化，不需要设置name属性，在设置路由的时候单个<router-view/>使用的是component，

多个<router-view/>里面需要设置一个name属性，设置路由的时候单个<router-view/>使用的是components，

<div>
   <router-view/>
   <router-view class="left" name="nav" />
   <router-view class="right" name="con" />
 </div>

然后在router.js中进行配置，注意：component改成要components，components是一个对象了，nav:AboutNav,左侧的nav就是<router-view name="nav" /> 标签里的 name属性值，nav:AboutNav,右侧的AboutNav就是引用组件时候import AboutNav from './views/AboutNav.vue'中的AboutNav。

import AboutCon from './views/AboutCon.vue'
import AboutNav from './views/AboutNav.vue'

	{
      path: '/about',
      name: 'about',
      components: {
        nav:AboutNav,
        con:AboutCon
      }
   }