开头
- 年初建立flag,今年要写99文章,纯粹就是个人的学习笔记!
- 由于刚开始写文章,有什么问题可以及时指出,会在第一时间改正!
创建方式
- createRouter
- 用来创建router对象
- 4.x用法
import { createRouter } from "vue-router"
const router = createRouter({
.....
})
import VueRouter from "vue-router"'
const router = new VueRouter({
// options
......
})
路由模式
- createWebHashHistory (hash)
- createWebHashHistory (history)
- 4.x用法
import {
createRouter,
createWebHashHistory,
createWebHashHistory
} from 'vue-router'
const router = createRouter({
history:createWebHashHistory() / createWebHashHistory()
})
const router = new VueRouter({
mode: 'hash' / 'history'
})
重定向
{
path: '/:pathMatch(.*)*', // 需要使用正则去匹配
redirect: Home,
}
{
path: '*',
redirect: Home
}
挂载方式
- 因为vue3的composition api,vue-router的挂载方式以插件来挂载
- 4.x的用法
import { createApp } from 'vue'
import router from './router.js'
import App from './App.vue'
createApp(App).use(router).mount('#app');
import router from './router.js'
new Vue({
router
})
组件中的使用
- 因为setup中不能访 this,所以提供两个api来获取 router 和 route , useRouter() 和 useRoute()
- 4.x的用法
import { useRouter,useRoute } from "vue-router"
export default({
setup(){
const router = useRouter();
const route = useRoute();
const linkToHome = () => {
router.push({
path:'/'
})
}
return{
linkToHome
}
}
})
export default({
methods:{
linkToHome(){
this.$router.push({
path:'/'
})
}
}
})
导航守卫
- 由于vue3 composition api的原因,beforeRouteUpdate 和 beforeRouteLeave被替换为 onBeforeRouteUpdate 和 onBeforeRouteLeave