vue-router 路由的使用

安装vue-router
命令行 vue ui 打开项目仪表盘 --插件–添加–vue-router

配置vue-router
配置app.vue同级的router.js
import Vue from ‘vue’
import Router from ‘vue-router’
Vue.use(Router)

导入组件A和B
export default new Router({
routes: [
{
path: 路径,
component: 组件
},
{
path: ‘A’,
component:()=>import(’./A.vue’)注意路径
},
{
path: ‘B’,
component:()=>import(’./B.vue’)注意路径
}
]
})

声明式导航（传值 与支付宝小程序做对比）
vue
A组件–>B组件
<router-link to="B?aaa=records”>

B组件通过this.$route.query接收传值
小程序

vue
<router-link to="B?aaa=records” replace> 不保存新history（无法返回当前页面）
不保存新history（无法返回当前页面）
小程序

编程式导航
vue
router.push(location, onComplete?, onAbort?)
A组件–>B组件(传值)
this.$router.push("/page/invoice/invoice-info/invoice-info?aaa=this.records")this.$router.push( { path:‘B’,query:{ aaa : this.records }} )
小程序
my.navigateTo({
url: 'B?aaa=records
})

vue
router.replace(location, onComplete?, onAbort?) 不保存新history（无法返回当前页面）
A组件–>B组件(传值)
this.$router.replace( { path:‘B’,query:{ aaa : this.records }} )
小程序
my.redirectTo({
url: 'B?aaa=records
})

router-view传值
<router-view ：id=‘id’ />
通过props接收
详情https://yuque.antfin-inc.com/taximini/h5taxi/kzrlt4 父子组件通信

vue-router过渡动效（左右切换）
template:

<template>
<div id="app">
<transition :name='transitionName'>
<router-view />
</transition>
</div>
</template>

script:

<script>
export default {
data(){
return {
transitionName:'slide-left'
}
},
watch:{
'$route'(to,from){
//判断是否返回
let routersArr=sessionStorage.getItem('routers')&&sessionStorage.getItem('routers').split(',')||[];
if(routersArr.length==0){
routersArr.push(from.path)
routersArr.push(to.path);
}else{
if(routersArr.indexOf(to.path)!=-1){
this.transitionName='slide-right'
routersArr.splice(routersArr.indexOf(to.path)+1,)
}else{
this.transitionName='slide-left'
routersArr.push(to.path)
}
}
sessionStorage.setItem('routers',routersArr.join(','))
}
}
}
</script>
 
style:
.slide-left-enter-active {
animation: slide-out 0.3s linear reverse
}
 
.slide-left-leave-active {
animation: slide-in 0.3s linear
}
.slide-right-enter-active {
animation: slide-in 0.3s linear reverse
}
 
.slide-right-leave-active {
animation: slide-out 0.3s linear
}
@keyframes slide-in {
0% {
transform: translate(0,0)
}
100% {
transform: translate(-100%,0)
}
}
@keyframes slide-out {
0% {
transform: translate(0,0)
}
100% {
transform: translate(100%,0)
}
}

导航守卫
全局守卫
全局前置守卫：router.beforeEach
全局前置守卫：router.beforeEach
const router = new VueRouter({ … })
router.beforeEach((to, from, next) => {// …})
router.afterEach((to, from) => { // … })

组件内的守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

export default {
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 this
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 this
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 this
}
}

参考链接：https://router.vuejs.org/zh/guide/#html