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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
JS 创建对象(常见的几种方法)
Nov 03 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
vuex 的简单使用
Mar 22 Javascript
详解vue-cli3使用
Aug 14 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 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版本号
2006/10/09 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
python构建基础的爬虫教学
2018/12/23 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
什么是python的自省
2020/06/21 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
高中自我评价范文
2014/01/27 职场文书
付款委托书范本
2014/10/05 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
大学生支教感言
2015/08/01 职场文书
企业财务管理制度范本
2015/08/04 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技