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

/app路径下视图显示:

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

/login路径下视图显示:

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

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





路由:


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

 

你可能感兴趣的:(Vue小笔记,Vue,案例)