?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’)跳转后再跳转当前页控制台报错
网友评论