vue script 实现路由

在 Vue 项目中，可以通过 Vue Router 实现路由功能。以下是几种常见的实现方式：

使用 Vue Router 的基本配置

安装 Vue Router：

npm install vue-router

在 main.js 或 main.ts 中引入并配置路由：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import About from './views/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

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

动态路由的实现

动态路由允许传递参数：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/user/:id', component: User }
  ]
})

在组件中获取动态参数：

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const userId = route.params.id
  }
}

嵌套路由配置

嵌套路由用于多层级页面结构：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user',
      component: UserLayout,
      children: [
        { path: '', component: UserHome }, // /user
        { path: 'profile', component: UserProfile } // /user/profile
      ]
    }
  ]
})

编程式导航

通过代码控制路由跳转：

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    function navigateToAbout() {
      router.push('/about')
    }

    function navigateBack() {
      router.go(-1)
    }
  }
}

路由守卫

全局前置守卫：

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

组件内守卫：

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    next()
  }
}

懒加载路由

优化性能，按需加载组件：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { 
      path: '/about',
      component: () => import('./views/About.vue')
    }
  ]
})

以上方法涵盖了 Vue Router 的主要功能，可根据项目需求选择适合的实现方式。