vue实现route
Vue Router 基础实现
安装 Vue Router 依赖包
npm install vue-router@4在 src/router/index.js 中创建路由实例
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
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')在 App.vue 中添加路由出口
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</template>动态路由配置
定义带参数的路由
{
path: '/user/:id',
name: 'user',
component: () => import('../views/UserView.vue')
}在组件中获取路由参数
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>导航守卫使用
全局前置守卫示例
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else {
next()
}
})路由独享守卫
{
path: '/admin',
component: AdminView,
beforeEnter: (to, from, next) => {
// 验证逻辑
}
}路由元信息
定义路由 meta 字段
{
path: '/dashboard',
component: DashboardView,
meta: { requiresAuth: true }
}在组件中访问 meta 信息
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.meta.requiresAuth)
</script>编程式导航
在组件中进行导航跳转
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function navigate() {
router.push('/dashboard')
// 或使用命名路由
// router.push({ name: 'dashboard' })
}
</script>带参数的导航
router.push({ name: 'user', params: { id: 123 } })
router.push({ path: '/user', query: { search: 'vue' } })
