Vue.router中的嵌套路由,和跳转的四种方式

嵌套路由&＃xff08;又叫 嵌套子路由&＃xff09;嵌套路由--- 通常由多层嵌套的组件组合而成。

1:router-view的细分

router-view第一层中&＃xff0c;包含一个router-view

2:每一个坑挖好了&＃xff0c;要对应单独的组件

路由配置

routes: [{path:&＃39;/menu&＃39;,name:&＃39;menu&＃39;,component:menu,//路由嵌套增加此属性children:[//在这里配置嵌套的子路由{},{},{}]}]

在进入首页下面会有主导航&＃xff0c;首页、新闻中心、客户案例&＃xff0c;关于我们&＃xff0c;这里拿新闻中心举个例子&＃xff1a;

1.首先写好两个基本路由跳转主页和新闻中心&＃xff0c;做好的效果如下&＃xff1a;

 2.在声明两个子组件&＃xff0c;为新闻中心下的嵌套子路由

let One &＃61; {template:&＃96;#one&＃96;}let Two &＃61; {template:&＃96;#two&＃96;}

  在视图层写上内容

3.先在 路由对象中的写好 我们的 嵌套路由&＃xff08;子路由&＃xff09;children:[]   在配置路由对象&＃xff0c;

是谁的子路由&＃xff0c;就在谁的配置规则下写

routes:[{path:&＃39;/index&＃39;,name:&＃39;Inedx&＃39;,component:Index},{path:&＃39;/news&＃39;,name:&＃39;News&＃39;,component:News,children:[{// 要先写父级的路劲在后面跟子路由的路劲path:&＃39;/news/one&＃39;,// 名称也是&＃xff0c;谁后面的子路由&＃xff0c;所以用父级去点它的子路由name:&＃39;News.One&＃39;,component:One},{path:&＃39;/news/two&＃39;,name:&＃39;News.Two&＃39;,component:Two}]}]

4.到组件中的模板&＃xff08;视图层&＃xff09;中&＃xff0c;通过标签跳转&＃xff0c;进行设置(在父路由的视图层设置)

在视图层&＃xff0c;下面四种方式&＃xff0c;均可以访问到 嵌套路由下对应的组件&＃xff01;&＃xff01;&＃xff01;

(1)

(2)

(3)第二种方法只要name&＃xff0c;不要path

(4)第二种方法只要path&＃xff0c;不要name

查看效果&＃xff1a;