vue的路由实现方式

Vue 路由的实现方式

Vue 路由主要通过 Vue Router 实现，它是 Vue.js 官方提供的路由管理器。以下是常见的路由实现方式：

基本路由配置

安装 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: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

动态路由匹配

通过冒号 : 标记动态路径参数，可以在组件中通过 $route.params 访问：

{
  path: '/user/:id',
  name: 'User',
  component: User
}

在组件中获取参数：

this.$route.params.id

嵌套路由

通过 children 属性实现嵌套路由，父组件需包含 <router-view>：

{
  path: '/user',
  component: User,
  children: [
    {
      path: 'profile',
      component: Profile
    },
    {
      path: 'posts',
      component: Posts
    }
  ]
}

编程式导航

通过 router.push 或 router.replace 实现页面跳转：

// 字符串路径
router.push('/about');

// 带参数的对象
router.push({ path: '/user', query: { id: '123' } });

// 命名路由
router.push({ name: 'User', params: { id: '123' } });

路由守卫

通过路由守卫控制导航行为，如全局前置守卫：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

路由懒加载

通过动态导入实现路由懒加载，优化性能：

{
  path: '/about',
  name: 'About',
  component: () => import('../views/About.vue')
}

命名视图

在同一个页面中展示多个路由组件，需命名 <router-view>：

{
  path: '/settings',
  components: {
    default: Settings,
    sidebar: Sidebar
  }
}

模板中需对应命名：

<router-view></router-view>
<router-view name="sidebar"></router-view>

以上是 Vue 路由的主要实现方式，根据项目需求选择合适的方法。