This time I will show you how to use Vue three-layer nested routing, and what are theprecautionswhen using Vue three-layer nested routing. The following is a practical case, let's take a look.
Vue nested routing:
Achieve the effect (the routing is nested at three levels, click on the first-level tab to display the second-level tab effect, click on the second-level tab to switch the corresponding content, Content not in the tab area will not be rendered repeatedly when switching):
Demo access path: http://IP:port/#/routers/
1. Create the case folder page/routers/
1 routers/index.vue
首页 新闻 娱乐
1-1- 1 routers/home/index.vue
HOME页面信息：
最新HOME 国际HOME 国内HOME
1-1-2 routers/home/tab/gj.vue、gn.vue、zx.vue
gj.vue：
国际HOME信息：
- {{result.name}}{{index}}
gn.vue:
国内HOME信息：
- {{result.name}}{{index}}
zx.vue：
最新HOME信息：
- {{result.name}}{{index}}
1-2 routers/news/index.vue
新闻页面信息：
最新新闻 国际新闻 国内新闻
1-2-1 routers/ news/tab/gj.vue、gn.vue、zx.vue
gj.vue：
国际新闻信息：
- {{result.name}}{{index}}
gn.vue：
国内新闻信息：
- {{result.name}}{{index}}
zx.vue：
最新新闻信息：
- {{result.name}}{{index}}
1-3-1 routers/yl/index.vue
娱乐页面信息：
最新娱乐 明星娱乐 焦点娱乐
1-3-2 routers/yl/tab/jd.vue、mx.vue、zx.vue
jd.vue：
焦点娱乐信息：
- {{result.name}}{{index}}
mx.vue：
明星娱乐信息：
- {{result.name}}{{index}}
zx.vue：
最新娱乐信息：
- {{result.name}}{{index}}
2. Routing configuration rules (router/index.js)
.... 省略导入路由、使用路由代码... .... // 嵌套路由的使用：第一层 import Rindex from '../page/routers/index' // 嵌套路由的使用：第二层 import Rhome from '../page/routers/home/index' // 嵌套路由的使用：第三层 import Rhomezx from '../page/routers/home/tab/zx' import Rhomegj from '../page/routers/home/tab/gj' import Rhomegn from '../page/routers/home/tab/gn' import Rnews from '../page/routers/news/index' import Rnewszx from '../page/routers/news/tab/zx' import Rnewsgj from '../page/routers/news/tab/gj' import Rnewsgn from '../page/routers/news/tab/gn' import Ryl from '../page/routers/yl/index' import Rylzx from '../page/routers/yl/tab/zx' import Rylmx from '../page/routers/yl/tab/mx' import Ryljd from '../page/routers/yl/tab/jd' // 路由规则配置： export default new Router({ routes : [ { name: 'rindex', path: '/routers', component: Rindex, redirect: {name: 'rindex_rhome'}, // 跳转到下一级第一个 children: [ { name: 'rindex_rhome', path: 'rindex_rhome', //如果这里不使用 "/rhome" 则表示是归属于上级路由（上级luyou/子path），如果使用 "/rhome" 则表示根路径下访问 component: Rhome, redirect: {name: 'rindex_rhome_Rhomezx'}, //跳转到下级第一层 children: [ { name: 'rindex_rhome_Rhomezx', path: 'rindex_rhome_Rhomezx', component: Rhomezx }, { name: 'rindex_rhome_Rhomegj', path: 'rindex_rhome_Rhomegj', component: Rhomegj }, { name: 'rindex_rhome_Rhomegn', path: 'rindex_rhome_Rhomegn', component: Rhomegn } ] }, { name: 'rindex_rnews', path: 'rindex_rnews', component: Rnews, redirect: {name: 'rindex_rnews_Rnewszx'}, children: [ { name: 'rindex_rnews_Rnewszx', path: 'rindex_rnews_Rnewszx', component: Rnewszx }, { name: 'rindex_rnews_Rnewsgj', path: 'rindex_rnews_Rnewsgj', component: Rnewsgj }, { name: 'rindex_rnews_Rnewsgn', path: 'rindex_rnews_Rnewsgn', component: Rnewsgn } ] }, { name: 'rindex_ryl', path: 'rindex_ryl', component: Ryl, redirect: {name: 'rindex_ryl_rylzx'}, chidren:[ { name: 'rindex_ryl_rylzx', path: 'rindex_ryl_rylzx', component: Rylzx }, { name: 'rindex_ryl_rylmx', path: 'rindex_ryl_rylmx', component: Rylmx }, { name: 'rindex_ryl_ryljd', path: 'rindex_ryl_ryljd', component: Ryljd } ] } ] } ] });
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Summary of how to use data-* attributes in H5
How to load jquery in a JS file. js
The above is the detailed content of How to use Vue three-layer nested routing. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
