Vue3 路由
Vue3 路由
Vue3 提供的路由解决方案是 Vue Router 4。Vue Router 4 与 Vue 应用程序非常兼容，并且提供了大量的路由功能。
Vue Router 4 特点：
- 支持 History API 和 Hash 模式
- 支持动态路由
- 嵌套路由
- 过渡效果
- 路由近似匹配
- 路由守卫
- Scroll Behavior
- 扩展性
- TypeScript 支持
安装
安装 Vue Router 4
npm install vue-router@4
在项目中导入，并使用 use 函数将其作为插件安装。
设置路由
在项目根目录下创建 router.js 文件并设置路由
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
在 main.js 中引用并挂载路由
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
路由参数
获取路由参数
路由参数可以通过 $route.params 获取。
在路由设置中添加动态路径参数，例如：
{
path: '/user/:id',
name: 'User',
component: User
}
在 User 组件中获取参数：
export default {
computed: {
userId() {
return this.$route.params.id
}
}
}
当 URL 发生变化时，组件会重新渲染，并且 $route.params 会更新。
添加查询参数
查询参数可以通过 $route.query 获取。
在 URL 后面添加 ?key=value 可以添加查询参数。例如：
http://example.com/?key=value
在组件中获取参数：
export default {
computed: {
query() {
return this.$route.query.key
}
}
}
路由导航
编程式导航
可以通过 router.push、router.replace 和 router.go 进行编程式导航。
例如：
// 进入 /about 路由
router.push('/about')
// 用新的页面替换当前页面
router.replace('/about')
// 向前或向后跳转
router.go(-1)
路由跳转
在模板中绑定路由事件，并使用 $router 访问路由实例。
例如，在模板中添加一个按钮：
<button @click="$router.push('/about')">Go to About</button>
路由守卫
路由守卫可以在路由导航前或后添加逻辑。
在路由设置中添加路由守卫：
routes.beforeEnter((to, from, next) => {
// ...
next()
})
routes.beforeEach((to, from, next) => {
// ...
next()
})
routes.afterEach((to, from) => {
// ...
})
Scroll Behavior
在路由设置中添加 Scroll Behavior 以控制页面滚动的行为。
例如，当用户从页面顶部导航到底部时，可以让页面滚动：
routes.scrollBehavior(to, from, savedPosition) {
return { top: 0, behavior: 'smooth' }
}
总结
Vue3 路由提供了强大的路由功能，可以通过编程式导航、路由跳转、路由守卫和 Scroll Behavior 实现高度可配置的路由。