vue二级路由设置

  项目当中使用vue的时候一定会用到路由，并且二级路由甚至三集路由的需求都是刚需，当然，多级路由的配置方法和二级的是一样的，简单讲讲二级路由的配置吧。

      首先把一级路由的结构准备好：

 
发现
今日学习
随时听
已购
我

import discover from './components/discover/discover.vue';
import todayStudy from './components/todayStudy/study.vue';
import listen from './components/listenAnyWhere/listen.vue';
import bought from './components/bought/bought.vue';
import mine from './components/mine/mine.vue';

const routes = [{path: '/',redirect: '/discover'},{path: '/discover',component: discover},{path: '/todayStudy',component: todayStudy},{path: '/listenAnyWhere',component: listen},{path: '/bought',component: bought},{path: '/mine',component: mine}
];

点击每天听本书后进入下一级：

在main.js里设置二级路由：

import thisMouth from './components/discover/detailEveryDay/thisMouth/thisMouth.vue';
import four from './components/discover/detailEveryDay/fourth/fourth.vue';
import three from './components/discover/detailEveryDay/three/third.vue';
import two from './components/discover/detailEveryDay/two/second.vue';
import one from './components/discover/detailEveryDay/one/first.vue';
import twel from './components/discover/detailEveryDay/twe/twel.vue';
import elev from './components/discover/detailEveryDay/elven/elev.vue';

const routes = [{path: '/',redirect: '/discover'},{path: '/discover',component: discover,children: [{path: '/',component: thisMouth},{path: '/thisMouth',component: thisMouth},{path: '/forthMouth',component: four},{path: '/thirdMouth',component: three},{path: '/secondMouth',component: two},{path: '/firstMouth',component: one},{path: '/elMouth',component: twel},{path: '/twMouth',component: elev}]},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！