vue 通过router路由控制同一组件router-view视图显示位置

/app路径下视图显示：

/login路径下视图显示：

app.vue组件视图：使用name属性

<template>
  <div id="app">
    <!-- 使用命名视图 控制同一个路径的视图显示位置 -->
    <router-view></router-view>
    <router-view name='a'></router-view>
  </div>
</template>

<script>

export default {
  
}
</script>

<style lang='less' scoped>
 
</style>

路由：


import Vue from 'vue'   //引入Vue
import Router from 'vue-router' 
import todo from '../todo/todo.vue'
import login from '../login/login.vue' 

 
Vue.use(Router)  
 
const router = new Router({
//mode:'history',
fallback:true, //无法识别history路由的浏览器，自动变成hash模式
  routes: [    
    // /app路径下 默认todo组件在上 login组件在下       
    {                    
      path: '/app',             
      components:{
        default:todo,
        a:login
    },
    },

    // /login路径下 默认login组件在上 todo组件在下
    {                    
      path: '/login',             
       components:{
        default:login,
        a:todo
    },
    },
  ]
})

export default router

来源：CSDN

作者：小羽向前跑

链接：https://blog.csdn.net/weixin_38404899/article/details/103699634

标签

vue