vue路由实现介绍
Vue 路由基础概念
Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。它通过动态映射 URL 到组件，实现无刷新页面切换。核心功能包括：
- 嵌套路由：支持多层级的路由配置。
- 模块化路由配置：通过 JavaScript 对象定义路由规则。
- 路由参数：通过动态路径参数（如
/user/:id）传递数据。 - 导航守卫：控制路由跳转前后的逻辑（如权限验证）。
安装与基本配置
通过 npm 或 yarn 安装 Vue Router：
npm install vue-router在项目中初始化路由：
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/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');动态路由与参数传递
通过冒号 : 定义动态路径参数，例如：
{ path: '/user/:id', component: User }在组件中通过 $route.params 获取参数：
export default {
mounted() {
console.log(this.$route.params.id);
}
}或使用 Vue Router 4 的 Composition API：
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(); } }
编程式导航
通过 router.push 或 <router-link> 实现跳转：
// 方法 1：字符串路径
router.push('/about');
// 方法 2：带参数的对象
router.push({ path: '/user', query: { id: '123' } });模板中使用 <router-link>：
<router-link to="/about">About</router-link>
<router-link :to="{ path: '/user', query: { id: '123' }}">User</router-link>路由懒加载
通过动态导入提升性能，减少初始加载时间：
const routes = [
{ path: '/', component: () => import('./views/Home.vue') }
];常见问题与优化
- 404 页面处理：
{ path: '/:pathMatch(.*)*', component: NotFound } - 滚动行为：
const router = createRouter({ scrollBehavior(to, from, savedPosition) { return { top: 0 }; // 每次切换路由滚动到顶部 } });
