vue-router 学习笔记

?xml version="1.0" encoding="UTF-8"?

通俗的说vue-router就是我们 WebApp 的链路径管理系统

使用 npm 安装，或者 cnpm 安装（如果 vue-cli 时选择安装了 vue-router,就不需要重复安装）

通过 router-link 制作导航

to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/”

vue-router 配置子路由

在原有的路由配置下加入 children 字段

需要注意的是，在配置路由文件前，需要先用import引入Hi1和Hi2。

通过 vue-router 传参

通过 name 传递参数，用$route.name的形式接受

通过<router-link>标签的 :to 属性进行传参，用$route.params.username进行接收（为主）

通过这种方法，刷新或者初次进入这个页面的时候，导致参数丢失

单页面多路由区域操作

在一个页面里有两个以上router-view区域

配置在 compoments 里，注意是 compoments，有个 s

利用 url 传递参数

冒号形式传递参数

在 url 中应用正则表达式（以圆括弧的形式加入）

重定向-redirect

路径不一致，但是跳转的组件或者页面是同一个

在配置文件中吧 compoment换成 redirect 参数就可以了

我们已经设置了一个 params 路由配置，再设置一个 goParams 的路由重定向，并传递参数。

alias 别名的使用

实现类似重定向效果

别名不支持在 path 为’/’中使用

路由的过渡动画

在<router-view>的外面添加一个<transition>标签，并给标签命名fade

css 过渡类名

fade-enter-active :进入过渡的结束状态，元素被插入时就生效，在过度完成后移除。

fade-enter：进入过渡开始的状态，元素被插入时生效，只应用一帧后结束

fade-leave：离开过渡的开始状态，元素被删除时触发，只应用一章后删除

fade-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除

过渡模式 mode：

in-out ： 新元素先进入过渡，完成之后当前元素过渡离开

out-in ： 当前元素先进行过渡离开，离开完成后新元素过渡进入

mode 的设置和 404 页面的处理

mode 的两个值

history：当你使用 history 模式时，URL 就像正常的url，也好看，例如http://jsapang.com/lms/

hash:默认'hash'值，但 hash 看起来就像无意义的字符排列，不太好看，也不符合我们一般浏览网址的喜欢

404页面的设置

新建一个有关错误信息的页面Error.vue

path:’*'

当<router-link>里的 url 错误时便会跳转至这个页面

路由的钩子

在路由配置文件中写钩子函数beforeEnter,有 from，to，next 三个对象 next(true)，跳转；next(false)路由不跳转；可以作为开关；

在 params.vue模板里写 beforeRouteEnter 和 beforeRouteLeave

编程式导航

Router.go(-1)

Router.go(1)

This.$router.push(‘/xxx’)

This.$router.push(‘/xxx’)跳转后再跳转当前页控制台报错