vue实现导航
使用 Vue Router 实现导航
Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页应用（SPA）的导航系统。以下是实现导航的基本步骤。
安装 Vue Router
npm install vue-router配置路由
在项目中创建 router/index.js 文件，配置路由规则：
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');在组件中使用导航
在模板中使用 <router-link> 实现导航跳转，<router-view> 显示路由组件：
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>动态路由与参数传递
动态路由允许通过 URL 传递参数，例如用户 ID 或页面标识符。
配置动态路由 在路由配置中定义动态参数：
const routes = [
{ path: '/user/:id', component: User }
];获取路由参数
在组件中通过 useRoute 获取参数：
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
const userId = route.params.id;
return { userId };
}
};导航跳转带参数
通过 router.push 或 <router-link> 传递参数：
<router-link :to="'/user/' + userId">User Profile</router-link>或编程式导航：
router.push('/user/123');嵌套路由
嵌套路由用于实现多层级的页面布局，例如主页面包含子菜单。
配置嵌套路由
在父路由的 children 属性中定义子路由：
const routes = [
{
path: '/dashboard',
component: Dashboard,
children: [
{ path: 'profile', component: Profile },
{ path: 'settings', component: Settings }
]
}
];在父组件中显示子路由
父组件模板中需包含 <router-view>：
<template>
<div>
<h1>Dashboard</h1>
<router-view></router-view>
</div>
</template>导航守卫
导航守卫用于控制路由跳转，例如权限验证或页面拦截。
全局前置守卫
在路由配置中使用 beforeEach：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});路由独享守卫
在路由配置中直接定义 beforeEnter：
const routes = [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
if (!isAdmin) next('/');
else next();
}
}
];组件内守卫
在组件中使用 beforeRouteEnter 或 beforeRouteLeave：
export default {
beforeRouteEnter(to, from, next) {
// 组件渲染前调用
next();
},
beforeRouteLeave(to, from, next) {
// 离开组件时调用
next();
}
};路由懒加载
懒加载可以优化页面加载性能，按需加载路由组件。
配置懒加载路由
使用动态 import 语法：
const routes = [
{ path: '/about', component: () => import('../views/About.vue') }
];结合 Webpack 分块 通过注释指定分块名称：
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')以上方法涵盖了 Vue Router 的核心功能，适用于大多数导航场景。根据实际需求选择合适的方式实现导航功能。
