vue router实现导航
Vue Router 导航实现方法
安装与基础配置 确保已安装 Vue Router，可通过 npm 或 yarn 安装：
npm install vue-router在项目中创建路由配置文件（如 router/index.js）：
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: () => import('../views/About.vue') }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;路由视图与链接
在根组件（如 App.vue）中添加 <router-view> 作为路由出口：
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view/>
</div>
</template>编程式导航
通过 useRouter 在组件中实现编程跳转：
import { useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
const navigate = () => {
router.push('/about'); // 跳转路由
// router.replace('/about'); // 替换当前路由
// router.go(-1); // 后退
};
return { navigate };
}
};动态路由与参数 定义带参数的路由：
const routes = [
{ path: '/user/:id', component: User }
];在组件中通过 useRoute 获取参数：
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
console.log(route.params.id); // 获取动态参数
}
};导航守卫 全局前置守卫示例：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});组件内守卫：
export default {
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被验证前调用
next();
}
};嵌套路由 配置子路由：
const routes = [
{
path: '/parent',
component: Parent,
children: [
{ path: 'child', component: Child }
]
}
];父组件需包含嵌套的 <router-view>：
<template>
<div>
<h2>Parent</h2>
<router-view/>
</div>
</template>路由元信息
通过 meta 字段传递额外信息：
const routes = [
{
path: '/admin',
component: Admin,
meta: { requiresAuth: true }
}
];路由懒加载 使用动态导入实现懒加载：
const routes = [
{
path: '/dashboard',
component: () => import('../views/Dashboard.vue')
}
];注意事项
- 路由模式需根据需求选择
createWebHistory（需服务器支持）或createWebHashHistory - 动态路由参数变化时需监听
route.params变化 - 导航守卫中确保始终调用
next()避免阻塞
