vue跳转静态HTML,Vue-router，在静态切换的世界中翱翔

什么是router

首先知道，Vue是适合在SPA(单页应用)开发中使用的，router能够做到类似html5和jQuery中的pjax(局部刷新，无刷新切换路由)的效果，也是Web应用的路由管理系统。

router快速上手

安装Vue-router

npm install vue-router --save-dev

如果配置过vue-cli则不需要主动去安装Vue-router，在安装Vue-cli的时候是可以选择一起安装的。

Vue配置

安装会在源码目录下安装router文件夹和index.js文件

默认配置：

尝试在components下新建一个vue模板，然后在index.js里写入

在router里根据上面的格式写入路由数组就可以添加路由，并且还要在头部import引入一下import Hi from '@/components/Hi'

然后看到src源码目录下的App.vue,这里是VueRouter的全局页面

我们打开本地阅览，尝试在host后面加上Hi，发现可以跳到刚刚配置的Hi.vue页面，但是只有局部，上面Vue默认的图片还是存在，这就是router的奇妙之处，在刚刚打开的App.vue里，可以看到一句这里就是Vue作为引导，把其他路由页面加入到这个页面的组件。设想我们需要做一个SaaS，就可以在这个页面写导航栏，而剩下的部分则依靠引入切换

- 说到导航栏，其实Vue给我们提供了一个新标签(也可以说是新组件)，来制作导航栏

我们在App.vue全局页面里写入

然后在浏览器中看到，已经有了两个导航按钮

我们注意到地址栏，然后点击Hi，发现已经能够无需刷新网页，就可以切换页面和路由，这就是router的强大之处

子路由

在实际构建网站中，我们会遇到二级栏目的情况，例如我们鼠标hover到关于上，会显示出关于我们和联系我们，这两个栏目都隶属于关于，所以就有了子路由的配置

假设我们把导航变成

Hi1和Hi2是Hi的子页面，然后我们希望这两个子页在H页面的底部，这种情况的话，我们需要在之前components下的Hi.vue写入

新建Hi1.vue和Hi2.vue，改改msg做区别，然后在index.js写入路由配置

这样就可以让Hi1和Hi2继承Hi

参数传递

在OA和SaaS开发中，我们经常遇到需要在路由中传递参数的情况，而使用router时首页|并不能传递参数，那就可以使用之前index.js在配置路由时一直没用过的name

假设我们需要在跳转到HelloWorld的时候接收到youNeed

首先在App.vue全局页面写一个假装是面包屑的标签

{{ $route.name }}

保存好，然后就在HelloWorld页面看到我们定义的youNeed

然后尝试给有子路由增加name参数

也能在浏览器中看到效果了。

但是这种方法并不常用，实际开发中，我们的传参是动态的，那就需要改造一下Hi1页面

改造成

这里的name要和index.js路由配置中的name一致，params接数组对象，然后在Hi1模板写入

这样就能接收到参数了。我们可以通过动态传参的方法去更改username和id的value.

单页面多路由操作

什么是单页面多路由操作，假设一个页面里我们有几个区域，需要引入几个模块，则需要在这个页面

然后我们新建一个hello1.vue和hello2.vue写好相应的区分，在index.js中写入路由配置：

deafult是默认配置，left和right则对应了刚才的，刷新就能看到效果了

通过url传递参数

上面提到的传递参数的方法，都是不会在url中体现的，而有的时候我们会喜欢用url来辨识文章或者一些操作，那就需要用url传参

新建一个params.vue的模板

index.js引入import Params from '@/components/params

添加路由

这里的格式是路径+冒号+属性

然后在App.vue导航栏加个params

params后面跟着的其实就是url参数了，点击试试就能看到路由中已经带了参数。接收方式有很多种，vue的方法是

配置路由时还能做一些验证，比如newsID必须是数字

直接括号里面写正则即可

router重定向

重定向即两个不同的路由打开的页面是一样的，类似返回首页的效果。

添加路由规则配置

在App.vue里添加一个导航返回首页即可

重定向传参

类似上面的路由传参，添加路由配置

添加导航：params2

一样可以传递参数并且跳转。主要，如果是重定向的path里写入了参数传递，而跳转的时候没有带参数，跳转后在页面内会什么都不显示

alias别名

alias别名的方式也可以实现类似重定向的效果，区别在于上面的redirect跳转后url内的地址就是重定向的地址，不会有区别，而alias别名是一个新的url地址，但是页面是一样的

这个时候，导航Hi1和Hansuku跳转的页面内容是一样的，但是地址是http://localhost:8080/#/Hi1和http://localhost:8080/#/Hansuku

路由过渡动画

在路由切换的时候，由于用户体验不到刷新感，我们需要增添一些过渡动画来提升用户体验

在router-view标签即页面会切换内容的地方包裹一层transition

name代表渐入渐出式，mode是出入循序

然后增加css

这样就有了一个比较基础的切换效果

路由模式

这里的mode代表路由模式，加上mode:'history'后，本身我们路由里面会带一个#号，现在就消失了，mode还有一个模式mode:'hash'这个模式会带上#号，选择上个人喜好就好。

404处理

VUE如果不配置，发生了404的情况下用户会比较懵逼的，不知道网页出了什么错，就是不显示

添加配置

*就是对所有没有的路由展示Error页面

引入import Error from '@/components/Error'

然后自由配置一个404模板即可

路由中的钩子函数

钩子函数能够监听两个状态，一个是进路由之前，一个是离开路由之前，配置钩子函数可以在index中写，也可以在模板中写

index.js中的钩子函数

next(true)是相当于一个开关的角色，如果换成了false就不会进行跳转,如果不写也会导致不跳转

模板中的钩子函数

编程式导航

假设需要一个后退和前进的按钮(类似chrome左上角的按钮)

html

script

需要注意的是，在没有历史记录的情况下$router.go是不起作用的

- 编程式跳转

方法跟$router.go大同小异，可以push任意页面

本文由

Hansuku创作，除注明转载/出处外，均为本站原创，转载前请务必署名

最后编辑时间为: 2017-11-15 18:28 Wednesday