vue-router（2）

1.路由嵌套

在路由下面可以嵌套其他的路由，通过添加children即可,其原理还是和树状组件类似

子组件会渲染到父组件的位置，不会插入到根组件位置

同样的，不要忘记引入组件

 

新建一个测试用的vue

 

 

特别重要的一点：子组件不会在根组件中被渲染，所以一定要在其父组件中使用<router-view>引入

 

在地址栏输入：

成功！

 

7、命名的路由视图、路由重定向

具名的路由:在设定路由表的时候就给它设定一个名字，<router-link :to=”XXX”>以后在绑定这个路由的时候就可以直接使用name这个字段来指定相应的路由 

假如我们希望<router-link>是一个li,那么只需要指定tag属性等于li即可

像这样在组件<template>里面，这样的<router-link>叫做声明式导航

我们也可以在路由表所在的文件里面进行编程式的导航

比如Routers.beforEach()

A、 什么是命名的路由视图？

比如<router-viewname=”viewA></router-view>

<router-view name=”viewA></router-view>

在路由表里，给其中一个路由指定组件的时候

component:{

        viewA:Apple,

        viewB:Orange

}

B、 什么是路由重定向？

routers:[

         {

                  path: ’/’,

redirect:’/apple’

}

//当我们访问根路径的时候，会重定向到/apple

]