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

左手的ㄟ右手 2023-06-25 03:25 48阅读 0赞

**/app路径下视图显示：**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]**

**/login路径下视图显示：**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70 1][]**

**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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191225151106943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019122515114447.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70