vue 实现路径
Vue 实现路径的方法
在 Vue 中实现路径管理通常涉及 Vue Router 的使用，以下是几种常见的实现方式：
基本路由配置
安装 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;动态路径参数
通过冒号 : 定义动态路径参数，可在组件中通过 $route.params 访问：
const routes = [
{ path: '/user/:id', component: User }
];
// 组件内获取参数
this.$route.params.id嵌套路由
使用 children 属性实现嵌套路由，需在父组件中添加 <router-view> 占位：
const routes = [
{
path: '/parent',
component: Parent,
children: [
{ path: 'child', component: Child }
]
}
];编程式导航
通过 router.push 或 router.replace 实现路径跳转：
// 字符串路径
this.$router.push('/about');
// 对象形式
this.$router.push({ path: '/user/123' });
// 替换当前路径（无历史记录）
this.$router.replace('/login');命名路由
为路由配置 name 属性，便于通过名称跳转：
const routes = [
{ path: '/settings', name: 'Settings', component: Settings }
];
// 跳转时使用
this.$router.push({ name: 'Settings' });路由守卫
通过全局或局部守卫控制路径访问权限：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});路由懒加载
使用动态导入实现路由组件的懒加载：
const routes = [
{ path: '/dashboard', component: () => import('../views/Dashboard.vue') }
];注意事项
- 确保在 Vue 实例中注入路由（
app.use(router)）。 - 路径匹配遵循优先级规则，先定义的路径优先级更高。
- 动态路径参数变化时，组件默认不会重新渲染，需通过监听
$route或使用key属性触发更新。
