一文搞定Vue3中使用vue-router
Posted 贩卖前端仔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一文搞定Vue3中使用vue-router相关的知识，希望对你有一定的参考价值。
在 Vue Router API 从 v3（Vue2）到 v4（Vue3）的重写过程中，大部分的 Vue Router API 都没有变化，但是在迁移你的程序时，你可能会遇到一些破坏性的变化。本文将使用v4体验新的API。
new Router 变成 createRouter
Vue Router 不再是一个类，而是一组函数。现在抛弃 new Router()，改成调用 createRouter函数。
//v3
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes
})
//v4
import { createRouter } from 'vue-router'
const router = createRouter({
// ...
})
废除了mode选项配置
新的history配置取代旧的 mode选项
v3：
- mode：默认`hash模式`
- 使用mode选项指定路由渲染模式
v4:
- mode的选项已被更换为更为灵活的`history选项`
- 每一个模式都由从vue-router导出的函数一一对应
对应关系如下：
-
history — createWebHistory -
hash — createWebHashHistory -
abstract — createMemoryHistory
所以V4后创建路由实例将变成如下：
`/*router/index.js*/`
//这里使用history模式举例
import { createRouter, createWebHistory } from 'vue-router'
export const constantRoutes = [
{
path: '/',
component: () => import('@/views/home/index.vue'),
meta: {
title: '首页'
}
},
...
]
export const router = createRouter({
history: createWebHistory(),
routes: constantRoutes
})
//将创建好的路由实例导出
export default router
建议：以后创建路由表引入路由采用懒加载路由的方式，这样打包的时候文件大小会变得小些。
❝component: () => import('@/views/home/index.vue')
❞
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//使用链式.use(...) eg:.use(store)等等
createApp(App).use(router).mount('#app')
取消（*）通配符路由
这种v3使用的路由匹配方式在v4已不适用了
{
// 会匹配所有路径
path: '*'
}
{
// 会匹配以 `/user-` 开头的任意路径
path: '/user-*'
}
现在必须使用自定义的 regex 参数来定义所有路由(*、/*)
{
path: '/404',
name: '404',
component: () => import('@/views/error-page/404.vue'),
meta: {
title: '404'
}
},
{
path: '/:pathMatch(.*)',
redirect: '/404'
},
<keep-alive>写法变更
v3中路由缓存页面是通过<keep-alive>包组件包住路由组件<router-view>达到页面数据缓存的效果
//v3
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
v4中，component是vue中的特殊组件，:is是用来绑定指定组件，这里是与路由对应的页面绑定
//v4
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive"/>
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive"/>
</router-view>
新增useRoute、useRouter
假定我们在路由表中定义这么一个用户详情组件,那么我在用户详情页该如何去获取路由中用户的Id呢？
{
path: '/user/:id',
name: 'userDetail',
component: () => import('@/views/userDetail/index.vue'),
meta: {
title: '用户详情'
}
}
这时「useRoute」就派上用场了，我们可以在userDetail组件上从vue-router引入这个函数进来
<template>
<div>
用户id为：{{id}}
</div>
</template>
<script>
import { useRoute,useRouter } from 'vue-router'
export default {
setup() {
const { params: { id } } = useRoute()
return { id }
}
}
</script>
当然想看下useRoute和useRouter有什么内容我们可以直接将方法挂在到浏览器上：
❝window.route = useRoute() window.router = useRouter()
❞
这样我们在浏览器控制台输入router就能看到内容了
可以看到useRouter()里面包含了路由的实例，跟V3的this.$router是一样的，v3我们写编程式路由是这样的：
this.$router.push('/login')
如今我们跳转路由是通过引入useRouter函数获取路由的实例方法
import { useRoute,useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
router.push('/login')
}
}
那useRoute又是什么东东？
里面包含的是当前路由信息，通过它可以获取到传参信息等。
以上是关于一文搞定Vue3中使用vue-router的主要内容，如果未能解决你的问题，请参考以下文章
在 Vue3 和 Vue-router 中获取当前路由的最佳方法？