1.路由嵌套

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

vue-router(2)

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

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

 vue-router(2)

新建一个测试用的vue

vue-router(2)

 

 

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

vue-router(2)

 

在地址栏输入:

vue-router(2)

成功!

vue-router(2)


 

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

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

vue-router(2)

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

vue-router(2)

像这样在组件<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

]


相关文章:

  • 2021-11-28
  • 2022-12-23
  • 2022-12-23
  • 2021-12-24
  • 2021-06-08
  • 2021-08-09
猜你喜欢
  • 2022-12-23
  • 2021-07-04
  • 2022-12-23
  • 2021-10-27
  • 2021-07-11
  • 2022-12-23
  • 2021-09-12
相关资源
相似解决方案