vue-router路由与页面间导航实例解析


Posted in Javascript onNovember 07, 2017

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。

vue-router

我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理。可以说所有的后端开发都是这样做的,而前端路由是不存在"请求"一说的。

前端路由是找到地址匹配的一个组件或者对象将其渲染出来。改变浏览器地址不向服务器发送请求有两种方法,

一是在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航;二是使用HTML5的window.history功能,使用URL的hash来模拟一个完整的URL。

vue-router是官方提供的一套专用的路由工具库,是vue的一个插件,我们需要在全局引用中通过vue.use()将它引入到vue实例中,

vue-router路由与页面间导航实例解析

使用vue-cli创建项目后(init初始化时vue-router确认y)

我们先来看一下项目src的结构,通过cmd进入到项目src目录下,执行 tree -f > list.txt 生成结构树(保存在list.txt中):

结构如下:

src
├─assets // 静态资源
│ └─image // 图片
│  
├─components // 组件 
│ └─HelloWorld
│  HelloWorld.vue
│  
└─router // 路由配置
│ └─index.js
│ 
│ App.vue // 默认程序入口
│ main.js
│

1、打开main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router, 
 render: h => h(App) 
})

第10行将配置的路由绑定到vue实例上,第11行在vue实例中使用render方法来绘制这个vue组件(App)完成初始化

Render是vue2新增的具有特色的方法,为了得到更好的运行速度,vue2也采用的类似react的Virtual Dom(虚拟Dom)

 2、然后我们在components中注册几个组件

3、打开router/index.js配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Singer from '@/components/rank/rank'
Vue.use(Router) // 注册router
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Hello',
 component: MHeader // 路由中指定组件
 },
 {
 path: '/rank',
 name: 'rank',
 component: Rank
 }
 ]
})

路由的模式

关键词:"mode","history模式","hash模式","Abstract模式"

我们可以在创建的Router中使用模式,如参数mode:history的参数,这个值意思是使用history模式,这种模式充分利用了history.pushState API来完成URL的跳转而无需重新加载页面 ,

如果不使用history模式,当访问rank的时候路由就会变成:

http://localhost/#rank

反之为:

http://localhost/rank

这就是history模式和hash模式的区别,除此之外还有一种abstract模式

  • Hash:使用URL hash值作为路由,
  • History:依赖HTML5 History API和服务器配置
  • Abstract:支持所有JavaScript运行环境,如node服务器端。如果发现没有浏览器的API,路由就会强制进入这个模式

路由与导航

关键词:"router-link" , "router-view"

vue-router提供两个指令标签组件来处理这个导航与自动渲染逻辑:

  • <router-view>——渲染路径匹配到的组件视图,
  • <router-link>——支持用户在具有路由功能的应用中导航

我们使用整两个标签组件来完成一个简单的页面布局:

vue-router路由与页面间导航实例解析

在路由使用时要明确一个原则就是:不直接引用路由定义,(即不要在router-link直接通过 to='conpontents/rank/rank' 来导向路由),当显式引用路由定义的URL一旦发生变化,所有引用的地方都要修改。

在router-link通过名称引用路由:向to属性传入一个对象显式的声明路由的名称:

<router-link :to="{ name:'rank' }">

这里留意使用v-bind绑定(简写:),因为这里需要向router-link传递的是一个对象{ name:'rank' }而不是一个字符串

动态路由

关键词:"动态路由参数","params","$router.params"

vue-router将参数融入到路由的路径定义之内成为路由的一部分,我们称这种参数为"动态路径参数";

使用非常简单,在参数名之前加上":",然后将参数写在路由定义的path内,

routers:[{
 name:'BookDetails',
 path:'books/:id',
 component:BookDetails 
 }]

1、这样定义之后,vue-router就会自动匹配/books/1、/books/2、...、/books/n 形式的路由模式,因为这样定义的路由的数量是不确定的,所以也称为"动态路由"。

2、在<router-link>中我们就可以加入一个params的属性来指定具体的参数值:

<router-link :to="{ name:'BookDetails',params:{ id:1 } }">
  //...
 </router-link>

3、当我们导航进入图书详情页之后,我们可能需要获取属性指定的参数值(即重新将:id参数读取出来),我们可以通过$router.params来完成:

export default {
 created () {
  const bookID = this.$router.params.id
 }
 }

嵌套式路由

关键词:"children",

我们利用下面的场景,首页/home/读书详情 页面,读书详情也我们不需要底部的导航区域,但是我们使用之前的路由定义,所有的页面都应该具有想用的底部导航条,按前面的路由结构是不可以导航到图书详情页的,如下:

vue-router路由与页面间导航实例解析

所以我们就需要另一种定义路由的方式,对前面的路由进行调整,

嵌套式路由又叫做子路由,要将路由显示到子视图中就要相应的子路由与之对应,我们只需要在路由定义中使用children数组属性就可以定义子路由了:

routers:[
 { 
  name:'Main',
  path:'/',
  component:Main,
  children:[
  { name:'Home',path:'home',component:Home }
  { name:'Me',path:'me',component:Me }
  ] 
 },
 { name:'BookDetail',path:'/books/:id',component:BookDetail } 
]

需要注意的是以"/"开头的嵌套路径会被当做根路径,所以不要在子路由上加上"/";

重定向路由与别名

关键词:"redirect","alias"

重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:

routes: [
 { path: '/a', redirect: '/b' }
 ]
// 重定向的目标也可以是一个命名的路由
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]

另外我们需要区别重定向和别名,『重定向』的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么『别名』又是什么呢?

/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样:

利用alias给路由设置别名

routes: [
 { path: '/a', component: A, alias: '/b' }
 ]

总结

到这里vue路由的基础我们已经总结完毕,我们需要在实战中不断练习,多多的去解决问题,方能更好的使用路由 帮我们完成任务,同时为vue进阶的路由知识打基础

Javascript 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
简单实现js拖拽效果
Jul 25 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
详解CocosCreator消息分发机制
Apr 16 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 #Javascript
EasyUI实现下拉框多选功能
Nov 07 #Javascript
ES6中字符串string常用的新增方法小结
Nov 07 #Javascript
ES6中数组array新增方法实例总结
Nov 07 #Javascript
vue组件父子间通信详解(三)
Nov 07 #Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 #Javascript
微信小程序上传图片到服务器实例代码
Nov 07 #Javascript
You might like
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
PHP+DBM的同学录程序(5)
2006/10/09 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python sorted函数原理解析及练习
2020/02/10 Python
python如何修改文件时间属性
2021/02/05 Python
幼儿师范毕业生自荐信
2013/11/09 职场文书
学校节能减排倡议书
2014/05/16 职场文书
学校春季防火方案
2014/06/08 职场文书
好人好事演讲稿
2014/09/01 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
先进党支部事迹材料
2014/12/24 职场文书
英语邀请函范文
2015/02/02 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
高中军训感想
2015/08/07 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers