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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
javascript实现简易数码时钟
Mar 30 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
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python的一些用法分享
2012/10/07 Python
python基础教程之常用运算符
2014/08/29 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
python实现学生管理系统
2018/01/11 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
中间件的定义
2016/08/09 面试题
精彩的大学生自我评价
2013/11/17 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
活动总结报告格式
2014/05/09 职场文书
英文商务邀请函范文
2015/01/31 职场文书
财务管理制度范本
2015/08/04 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python