vue router学习之动态路由和嵌套路由详解


Posted in Javascript onSeptember 21, 2017

本文主要参考:https://router.vuejs.org/zh-cn/essentials/nested-routes.html

本文的阅读前提是已经能够搭建一个vue前台程序并且运行。如果还么有搭建可以参考文章:
https://3water.com/article/111650.htm

好,下面上货。

首先介绍一下动态路由。
动态路由按照我的理解,就是说能够进行页面的跳转,比如说:下面的这个页面中:

<template> 
 <div id="app"> 
  <header> 
   <router-link to="/">/</router-link> 
   <router-link to="/hello">/hello</router-link> 
   <router-link to="/cc">/cc</router-link> 
  </header> 
  <router-view style="border: 1px solid red"></router-view> 
 </div> 
</template>

如果点击了/hello,那么在router-view中就会加载对应的模块,也就是在路由中设置的模块。

import Vue from 'vue' 
import Router from 'vue-router' 
import Hello from '@/components/Hello' 
import Foo from '@/components/Foo' 
import Foo2 from '@/components/Foo2' 
import Foo3 from '@/components/Foo3' 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
  {path: '/', redirect: '/hello'}, 
  { 
   path: '/hello', 
   component: Hello, 
   children: [ 
    {path: '/hello/foo', component: Foo}, 
    {path: '/hello/foo2', component: Foo2}, 
    {path: '/hello/foo3', component: Foo3} 
   ] 
  }, 
  { 
   path: '/cc', 
   name: 'Foo', 
   component: Foo 
  } 
 ] 
})

也就是说,会跳转到Hello和Foo这两个组件。

那么嵌套路由是什么意思呢,最开始我以为的是这样:/hello/foo 和/hello/foo2这两个路由可以简写成嵌套路由,其实不是的。嵌套路由只的是,在子组件中再次嵌套组件。然后在使用路由进行跳转,这样跳转的时候,变化的就只有子组件,而外边的父组件没有变化。

下面我把完整的例子放出来,看一下:

App.vue

<template> 
 <div id="app"> 
  <header> 
   <router-link to="/">/</router-link> 
   <router-link to="/hello">/hello</router-link> 
   <router-link to="/cc">/cc</router-link> 
  </header> 
  <router-view style="border: 1px solid red"></router-view> 
 </div> 
</template> 
 
<script> 
export default { 
 name: 'app' 
} 
</script> 
 
<style> 
#app { 
 font-family: 'Avenir', Helvetica, Arial, sans-serif; 
 -webkit-font-smoothing: antialiased; 
 -moz-osx-font-smoothing: grayscale; 
 text-align: center; 
 color: #2c3e50; 
 margin-top: 60px; 
} 
</style>

Foo.vue

<template> 
 <div> 
  <h1>3434234343</h1> 
 </div> 
</template> 
 
<script> 
 export default { 
  name: 'Foo', 
  data () { 
   return { 
   } 
  } 
 } 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 
 a { 
  color: #42b983; 
 } 
</style>

Foo2.vue

<template> 
 <div> 
  <h1>this is Foo2</h1> 
 </div> 
</template> 
 
<script> 
 export default { 
  name: 'Foo2', 
  data () { 
   return { 
   } 
  } 
 } 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 
 a { 
  color: #42b983; 
 } 
</style>

Foo3.vue

<template> 
 <div> 
  <h1>this is foo3</h1> 
 </div> 
</template> 
 
<script> 
 export default { 
  name: 'Foo3', 
  data () { 
   return { 
   } 
  } 
 } 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 
 a { 
  color: #42b983; 
 } 
</style>

Hello.vue

<template> 
 <div class="hello"> 
  <h1>{{ msg }}</h1> 
  <h2>Essential Links</h2> 
  <ul> 
   <li><a href="https://vuejs.org" rel="external nofollow" target="_blank">Core Docs</a></li> 
   <li><a href="https://forum.vuejs.org" rel="external nofollow" target="_blank">Forum</a></li> 
   <li><a href="https://gitter.im/vuejs/vue" rel="external nofollow" target="_blank">Gitter Chat</a></li> 
   <li><a href="https://twitter.com/vuejs" rel="external nofollow" target="_blank">Twitter</a></li> 
   <br> 
   <li><a href="http://vuejs-templates.github.io/webpack/" rel="external nofollow" target="_blank">Docs for This Template</a></li> 
  </ul> 
  <h2>Ecosystem</h2> 
  <ul> 
   <li><a href="http://router.vuejs.org/" rel="external nofollow" target="_blank">vue-router</a></li> 
   <li><a href="http://vuex.vuejs.org/" rel="external nofollow" target="_blank">vuex</a></li> 
   <li><a href="http://vue-loader.vuejs.org/" rel="external nofollow" target="_blank">vue-loader</a></li> 
   <li><a href="https://github.com/vuejs/awesome-vue" rel="external nofollow" target="_blank">awesome-vue</a></li> 
  </ul> 
  <div> 
   <router-link to="/hello/foo">/hello/foo</router-link> 
   <router-link to="/hello/foo2">/hello/foo2</router-link> 
   <router-link to="/hello/foo3">/hello/foo3</router-link> 
  </div> 
  <router-view style="border: solid 1px blue"></router-view> 
 </div> 
</template> 
<script> 
 export default { 
  name: 'hello', 
  data () { 
   return { 
    msg: 'Welcome to Your Vue.js App' 
   } 
  } 
 } 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 
 a { 
  color: #42b983; 
 } 
</style>

路由:

import Vue from 'vue' 
import Router from 'vue-router' 
import Hello from '@/components/Hello' 
import Foo from '@/components/Foo' 
import Foo2 from '@/components/Foo2' 
import Foo3 from '@/components/Foo3' 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
  {path: '/', redirect: '/hello'}, 
  { 
   path: '/hello', 
   component: Hello, 
   children: [ 
    {path: '/hello/foo', component: Foo}, 
    {path: '/hello/foo2', component: Foo2}, 
    {path: '/hello/foo3', component: Foo3} 
   ] 
  }, 
  { 
   path: '/cc', 
   name: 'Foo', 
   component: Foo 
  } 
 ] 
})

需要注意的是仔细的看App.vue和Hello.vue中,都包含<router-view></router-view>,但是他们的作用不同,App.vue是顶层路由,指的是组外层的路由,Hello.vue中的是嵌套路由,负责显示子组件。
我把页面截图一下:

vue router学习之动态路由和嵌套路由详解 

这个界面,点击最上边的 / 或者/hello 或者/cc的时候,发生变化的是红色路由中的内容。当点击/hello/foo /hello/foo2 /hello/foo3 的时候,发生变化的是下面蓝色路由中的内容。

这样就和我们平时应用十分的相似了。最外层于有变化,或者局部有变化,但是不想全局的发生改变。

同时,这样也符合了模块化,各个模块分别在不同的模块中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
vue-router 权限控制的示例代码
Sep 21 #Javascript
react router 4.0以上的路由应用详解
Sep 21 #Javascript
详解10分钟学会vue滚动行为
Sep 21 #Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 #jQuery
JavaScript实现简单生成随机颜色的方法
Sep 21 #Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 #Javascript
shiro授权的实现原理
Sep 21 #Javascript
You might like
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
php网页后退不再出现过期
2007/03/08 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
php生成图片验证码
2015/06/09 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
jQuery 事件队列调整方法
2009/09/18 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
javascript学习笔记--数字格式类型
2014/05/22 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
js的回调函数详解
2015/01/05 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
JS实现打砖块游戏
2020/02/14 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
详解Python中heapq模块的用法
2016/06/28 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
爱护公共设施标语
2014/06/24 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android