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 实现高度可配置的路由。