首页 > 其他 > 详细

嵌套路由与拼接路由结合

时间:2019-10-12 13:39:48      阅读:115      评论:0      收藏:0      [点我收藏+]
嵌套路由(就是路由后面接children),拼接路由(相当于多个组件一并使用),写在components里,要拼接几个就写几个,然后<router-view></router-view>个数要与
拼接路由个数相同,代码如下
router里index
import login from ‘@/view/login‘
import hello from ‘@/components/HelloWorld‘
import aa from ‘@/components/aa‘
import bb from ‘@/components/bb‘

export default new Router({
  routes:[{
      path: ‘/login‘,
      name: ‘login‘,
      component: login,
      children: [{
        path: ‘login1‘,
        components: {
          default: hello,
          a: aa,
          b: bb
        }
      }]
    }]
    }),
login页面使用三个导入的组件
 <router-view ></router-view>//没有name所以components写的是default:hello
  <router-view  name="a"></router-view>
  <router-view  name="b"></router-view>
  总结:login页面显示在app挂载路由(app页面),login页面又嵌套了三个子路由(嵌套路由),三个子路由是三个组件拼接而成的(拼接路由),拼接路由写法
  略有不同。效果大致是,进入login页面显示login页面的内容,进入login/login1页面显示login页面+各个组件总和。login/login1页面先是组件内容总和渲染
  到login页面,login页面在渲染到app页面。

 

嵌套路由与拼接路由结合

原文:https://www.cnblogs.com/abpf/p/11660884.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!