当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue二级路由设置方法

vue二级路由设置方法

2019年06月07日  | 移动技术网IT编程  | 我要评论

花还开,工伤事故调查表,火狐狸户外网上商城

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

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

 <router-link to="/discover">
  <div @click="clickfind('发现')">
   <span class="icon-find"></span>
   <p>发现</p>
  </div>
  </router-link>
  <router-link to="/todaystudy">
  <div @click="clickstudy('今日学习')">
   <span class="icon-todaystudy"></span>
   <p>今日学习</p>
  </div>
  </router-link>
  <router-link to="/listenanywhere">
  <div @click="clicklisten('随时听')">
   <span class="icon-listenany"></span>
   <p>随时听</p>
  </div>
  </router-link>
  <router-link to="/bought">
  <div @click="clickbought('已购')">
   <span class="icon-areadyby"></span>
   <p>已购</p>
  </div>
  </router-link>
  <router-link to="/mine">
  <div @click="clickme">
   <span class="icon-me"></span>
   <p>我</p>
  </div>
  </router-link>
 </div>
 <router-view></router-view>

在main.js里引入模块，并配置路由：

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, 
 <span style="color:#ff0000;">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 
  } 
 ]</span> 
 },

在相应的路径下建立各个路由所需模块即可

 

以上这篇vue二级路由设置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网