首页 > 文章 > web前端 > 使用vue实现二级路由设置方法

使用vue实现二级路由设置方法

亚连原创: 2018-06-06 15:54:465209浏览

下面我就为大家分享一篇vue二级路由设置方法，具有很好的参考价值，希望对大家有所帮助。

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

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

 <router-link to="/discover">
  <p @click="clickFind(&#39;发现&#39;)">
   <span class="icon-find"></span>
   <p>发现</p>
  </p>
  </router-link>
  <router-link to="/todayStudy">
  <p @click="clickStudy(&#39;今日学习&#39;)">
   <span class="icon-todayStudy"></span>
   <p>今日学习</p>
  </p>
  </router-link>
  <router-link to="/listenAnyWhere">
  <p @click="clickListen(&#39;随时听&#39;)">
   <span class="icon-listenAny"></span>
   <p>随时听</p>
  </p>
  </router-link>
  <router-link to="/bought">
  <p @click="clickBought(&#39;已购&#39;)">
   <span class="icon-areadyBy"></span>
   <p>已购</p>
  </p>
  </router-link>
  <router-link to="/mine">
  <p @click="clickMe">
   <span class="icon-me"></span>
   <p>我</p>
  </p>
  </router-link>
 </p>
 <router-view></router-view>

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

import discover from &#39;./components/discover/discover.vue&#39;; 
import todayStudy from &#39;./components/todayStudy/study.vue&#39;; 
import listen from &#39;./components/listenAnyWhere/listen.vue&#39;; 
import bought from &#39;./components/bought/bought.vue&#39;; 
import mine from &#39;./components/mine/mine.vue&#39;;

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

先看效果

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

在main.js里设置二级路由

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

const routes = [ 
 { 
 path: &#39;/&#39;, 
 redirect: &#39;/discover&#39; 
 }, 
 { 
 path: &#39;/discover&#39;, 
 component: discover, 
 <span style="color:#ff0000;">children: [ 
  { 
  path: &#39;/&#39;, 
  component: thisMouth 
  }, 
  { 
  path: &#39;/thisMouth&#39;, 
  component: thisMouth 
  }, 
  { 
  path: &#39;/forthMouth&#39;, 
  component: four 
  }, 
  { 
  path: &#39;/thirdMouth&#39;, 
  component: three 
  }, 
  { 
  path: &#39;/secondMouth&#39;, 
  component: two 
  }, 
  { 
  path: &#39;/firstMouth&#39;, 
  component: one 
  }, 
  { 
  path: &#39;/elMouth&#39;, 
  component: twel 
  }, 
  { 
  path: &#39;/twMouth&#39;, 
  component: elev 
  } 
 ]</span> 
 },

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

上面是我整理给大家的，希望今后会对大家有帮助。

在mint-ui中使用时间插件及获取选择值

VUE2实现二级省市联动选择

在vue中全选实现数据的绑定及获取

以上是使用vue实现二级路由设置方法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：使用mint-ui实现省市区三级联动效果下一篇：react项目开发

查看更多