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 相关文章推荐
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
简单的三步vuex入门
May 20 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
详解Python中的四种队列
2018/05/21 Python
python制作填词游戏步骤详解
2019/05/05 Python
Django之form组件自动校验数据实现
2020/01/14 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
用python实现学生管理系统
2020/07/24 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
测量实习生自我鉴定
2013/09/19 职场文书
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
放飞理想主题班会
2015/08/14 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
python实现会员信息管理系统(List)
2022/03/18 Python