vue路由实现思路

路由基础配置

在Vue项目中通过vue-router实现路由功能，需先安装依赖。使用npm或yarn安装：

npm install vue-router@4

在项目中创建路由配置文件（通常为router/index.js），引入必要模块并定义路由数组：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  { path: '/', name: 'home', component: HomeView },
  { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

路由挂载与使用

在主入口文件（如main.js）中导入路由实例并挂载到Vue应用：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

在组件模板中使用<router-link>进行导航，<router-view>作为路由出口：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>

动态路由匹配

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

{
  path: '/user/:id',
  component: () => import('../views/UserView.vue')
}

在目标组件中获取参数：

this.$route.params.id

路由守卫控制

通过全局前置守卫实现权限控制或页面跳转拦截：

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

组件内可使用beforeRouteEnter等守卫：

beforeRouteEnter(to, from, next) {
  // 在渲染该组件的对应路由被验证前调用
  next(vm => {
    // 通过vm访问组件实例
  })
}

嵌套路由实现

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

{
  path: '/parent',
  component: ParentView,
  children: [
    { path: 'child', component: ChildView }
  ]
}

路由懒加载优化

使用动态导入语法实现路由级代码分割，提升首屏加载速度：

component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

命名视图与多路由出口

通过命名视图实现复杂布局，需在路由配置和模板中指定名称：

{
  path: '/multi',
  components: {
    default: MainComponent,
    sidebar: SidebarComponent
  }
}

模板中使用多个<router-view>：

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