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引用对象的方法代码
Aug 13 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
JS字符串截取函数实例
Dec 27 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 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实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
详解React中setState回调函数
2018/06/14 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python爬取三国演义的实现方法
2016/09/12 Python
Python 专题一 函数的基础知识
2017/03/16 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
python实现对输入的密文加密
2019/03/20 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
python线程里哪种模块比较适合
2020/08/02 Python
几款好用的python工具库(小结)
2020/10/20 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
工作自我评价分享
2013/12/01 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书