vue二级路由设置方法


Posted in Javascript onFebruary 09, 2018

项目当中使用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 
 } 
];

先看效果

vue二级路由设置方法 

vue二级路由设置方法 

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

vue二级路由设置方法 

在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二级路由设置方法 

以上这篇vue二级路由设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
javascript自定义的addClass()方法
May 28 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
vue写一个组件
Apr 09 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
vue实现数字滚动效果
Jun 29 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
从零开始搭建一个react项目开发
Feb 09 #Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 #Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 #Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 #Javascript
Vuejs 单文件组件实例详解
Feb 09 #Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 #Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 #Javascript
You might like
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
AngularJS基础知识
2014/12/21 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
JS获取动态添加元素的方法详解
2019/07/31 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
在Python中实现贪婪排名算法的教程
2015/04/17 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
numpy数组拼接简单示例
2017/12/15 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
python数据分析:关键字提取方式
2020/02/24 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
专业销售业务员求职信
2013/11/18 职场文书
大学自荐信
2013/12/12 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
小学三年级学生评语
2014/04/22 职场文书
2015年体检中心工作总结
2015/05/27 职场文书