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 相关文章推荐
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
react合成事件与原生事件的相关理解
May 13 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
改进的IP计数器
2006/10/09 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
PHP整合PayPal支付
2015/06/11 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
网上抓的一个特效
2007/05/11 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
python实现维吉尼亚算法
2019/03/20 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
基于Django统计博客文章阅读量
2019/10/29 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
会计实习期自我鉴定
2013/10/06 职场文书
汽车运用工程毕业生自荐信
2013/10/29 职场文书
博士生求职信
2014/07/06 职场文书
社区党建工作总结2015
2015/05/13 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
如何做好工作总结!
2019/04/10 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis