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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
iframe 异步加载技术及性能分析
Jul 19 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
Angular短信模板校验代码
Sep 23 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
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
Python中几个比较常见的名词解释
2015/07/04 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
mac使用python识别图形验证码功能
2020/01/10 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
软件测试题目
2013/02/27 面试题
个人银行贷款担保书
2014/04/01 职场文书
求职意向书
2014/07/29 职场文书
学习型党组织心得体会
2014/09/12 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
docker 制作mysql镜像并自动安装
2022/05/20 Servers