Vue-router

Vue Router的使用和懒加载

Vue Router是Vue.js官方的路由管理器，用于构建单页面应用（SPA）

• 安装和引入

使用Vue Router前，需要通过npm安装Vue Router包，并在项目中引入。

// main.js

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

// 创建路由实例
const router = createRouter({
  // 路由配置
  routes: [
    {
      path: '/',
      component: Home
    }
  ],
  // 使用HTML5 History模式
  history: createWebHistory()
})

// 创建Vue应用并挂载路由
const app = createApp(App)
app.use(router)
app.mount('#app')

以上代码中，createRouter 函数用于创建路由实例， createWebHistory函数用于配置路由的模式（这里使用的是HTML5 History模式）。然后，通过 app.use(router) 将路由实例挂载到Vue应用上

：尽量使用 hash 路由

• 路由配置

在创建路由实例时，需要配置路由的路径和对应的组件。

// main.js

// 创建路由实例
const router = createRouter({
  // 路由配置
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: () => import('./components/About.vue')
    }
  ],
  // 使用HTML5 History模式
  history: createWebHistory()
})

以上代码中，通过 routes 数组配置了两个路由：根路径对应的组件是 Home.vue，/about 路径对应的组件是懒加载的 About.vue 使用懒加载可以提高应用的性能，只有在需要时才会加载对应的组件。

• 路由跳转

在Vue中，可以使用 <router-link> 组件或 $router 对象进行路由跳转。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>
 
// Home.vue

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }
}

以上代码中，<router-link> 组件用于在模板中生成路由链接，从而实现页面间的跳转。 $router 对象可以在Vue实例中通过 this.$router 访问，使用push方法跳转到指定的路由。

路由懒加载

懒加载可以提高应用的性能，只有在需要时才会加载对应的组件。在Vue Router中，可以使用 import语法糖懒加载组件。

// main.js

// 创建路由实例
const router = createRouter({
  // 路由配置
  routes: [
    {
      path: '/about',
      component: () => import('./components/About.vue')
    }
  ],
  // 使用HTML5 History模式
  history: createWebHistory()
})

在以上代码中，将组件的引入部分改为动态 import ，从而实现懒加载。

以上为Vue-router及路由懒加载的配置示例