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下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
Uploadify上传文件方法
Mar 16 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
PHP无限分类(树形类)
2013/09/28 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
Python模块学习 re 正则表达式
2011/05/19 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
使用pip安装python库的多种方式
2019/07/31 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
软件测试常见笔试题
2012/02/04 面试题
客服工作职责
2013/12/11 职场文书
银行职业规划书范文
2013/12/28 职场文书
父母对孩子的寄语
2014/04/09 职场文书
暑期学习心得体会
2014/09/02 职场文书
高中美术教学反思
2016/02/17 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
python 中的@运算符使用
2021/05/26 Python
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Python Django模型详解
2021/10/05 Python