VueRouter3学习笔记

1，入门案例

安装库。

npm install vue-router@3

准备三个组件。
App.vue
AAA.vue
BBB.vue

<template><div><router-link to="/a">aaa</router-link><router-link to="/b">bbb</router-link><router-view /></div>
</template><template><div>AAA</div>
</template><template><div>BBB</div>
</template>

新建router.js。

import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/a', component: AAA },{ path: '/b', component: BBB }]
})
export default router

main.js。

import router from './router.js'new Vue({render: h => h(App),router
}).$mount('#app')

效果：

2，一些细节

高亮效果

router-link的active-class属性，指定当前路由链接的高亮类名。

<template><div><router-link to="/a" active-class='abc'>aaa</router-link><router-link to="/b" active-class='abc'>bbb</router-link><router-view /></div>
</template>
<style>
.abc {color: red;
}
</style>

非当前路由会被销毁

<template><div>AAA</div>
</template>
<script>
export default {beforeDestroy() {console.log(1);}
}
</script>

3，嵌套路由

AAA内还有CCC和DDD。

二级路由链接要从一级开始写，
配置项无须加斜线。

<template><div><router-link to="/a">aaa</router-link><router-link to="/b">bbb</router-link><router-view /></div>
</template><template><div><router-link to="/a/c">ccc</router-link><router-link to="/a/d">ddd</router-link><router-view /></div>
</template><template><div>BBB</div>
</template><template><div>CCC</div>
</template><template><div>DDD</div>
</template>

router.js。

import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"
import CCC from './CCC.vue'
import DDD from './DDD.vue'
Vue.use(VueRouter)const router = new VueRouter({routes: [{path: '/a', component: AAA,children: [{path: 'c', component: CCC}, {path: 'd', component: DDD}]},{ path: '/b', component: BBB }]
})
export default router

4， 传递查询参数

发送。

<template><div><router-link to="/a?id=123">aaa</router-link><router-link to="/a?id=124">aaa</router-link><router-link to="/b">bbb</router-link><router-view /></div>
</template>

接收。

<template><div>AAA{{ $route.query.id }}</div>
</template>

发送的第二种写法。

<template><div><router-link :to="{path: '/a',query: {id: 123}}">aaa</router-link><router-link to="/a?id=124">aaa</router-link><router-link to="/b">bbb</router-link><router-view /></div>
</template>

5，命名路由

给路由起个名字。

import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/a', component: AAA, name: "a" },{ path: '/b', component: BBB, name: "b" }]
})
export default router

跳转时传递名称。

<template><div><router-link :to="{name: 'a'}">aaa</router-link><router-link :to="{name: 'b'}">bbb</router-link><router-view /></div>
</template>

6，传递路径参数

发送。

<template><div><router-link to="/a/123">aaa</router-link><router-link to="/a/124">aaa</router-link><router-link to="/b">bbb</router-link><router-view /></div>
</template>

配置。

import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/a/:id', component: AAA },{ path: '/b', component: BBB }]
})
export default router

接收。

<template><div>AAA{{ $route.params.id }}</div>
</template>

7，路径参数转props

启用props，会将所有路径参数通过props传递给组件。

import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/a/:id', component: AAA, props: true },{ path: '/b', component: BBB }]
})
export default router

组件要声明该props。

<template><div>AAA{{ id }}</div>
</template>
<script>
export default {props: ['id']
}
</script>

8，查询参数转props

props写成函数。

import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"Vue.use(VueRouter)const router = new VueRouter({routes: [{path: '/a', component: AAA, props(route) {return {id: route.query.id}}},{ path: '/b', component: BBB }]
})
export default router

9，replace模式

替换掉之前的路由，而不是压栈。

<template><div><router-link to="/a" replace>aaa</router-link><router-link to="/b" replace>bbb</router-link><router-view /></div>
</template>

10，编程式导航

代码进行跳转。

<template><div><div>AAA</div><button @click="add">按钮</button></div>
</template>
<script>
export default {methods: {add() {this.$router.push("/b")}},
}
</script>

参数可以是对象，与前面route-link的to用法一致。

11，缓存路由组件

不销毁。

<keep-alive><router-view />
</keep-alive>

12，新生命周期

不销毁的时候，激活与失活。

<template><div><div>AAA</div></div>
</template>
<script>
export default {activated() {console.log(1);},deactivated() {console.log(2);},
}
</script>

13，路由守卫