嵌套路由(就是路由后面接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页面。