vue实现路由匹配
Vue 路由匹配实现方法
在 Vue 中实现路由匹配通常使用 Vue Router 库，以下是核心实现方式：
基本路由配置
安装 Vue Router 后，在 router/index.js 中配置路由：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})动态路由匹配
使用冒号标记动态路径参数：
{
path: '/user/:id',
component: () => import('../views/User.vue')
}路由参数获取
在组件中通过 $route.params 获取参数：
// 在模板中
{{ $route.params.id }}
// 在 script 中
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)嵌套路由
通过 children 属性实现嵌套路由：
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
}
]
}路由守卫
实现权限控制或导航守卫：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})路由匹配模式
- 严格匹配：默认情况下路由不区分结尾斜杠
- 敏感匹配：配置 sensitive: true 使路径大小写敏感
- 自定义匹配：通过 pathToRegexp 选项自定义正则匹配规则
编程式导航
在组件中进行路由跳转：
import { useRouter } from 'vue-router'
const router = useRouter()
// 跳转到指定路径
router.push('/about')
// 带参数跳转
router.push({ name: 'User', params: { id: 123 } })404 路由处理
在路由配置最后添加通配符路由：
{
path: '/:pathMatch(.*)*',
component: () => import('../views/NotFound.vue')
}
