集成路由

现在，创建一个全新的 vue 项目

npm init vue@latest

将路由集成进去

启动后访问http://localhost:5173/home和http://localhost:5173/about

在 src 目录下存在了router文件夹

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router

此时，我们将第 13 行的/about改成/news,此时，再访问http://localhost:5173/about就不行了，应该访问http://localhost:5173/news

路由之所以生效，是因为我们在main.ts文件里进行了注册

import './assets/main.css'

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

const app = createApp(App)

app.use(router)

app.mount('#app')

现在我们项目中存在两个路由地址，分别是/和/news

使用如下：

<nav>
  <RouterLink to="/">Home</RouterLink>
  <RouterLink to="/news">About</RouterLink>
</nav>

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效

// 将
// import LoginView from "../views/LoginView.vue"
// 替换成
const LoginView = () => import('../views/LoginView.vue')

在此例中，/为正常加载，/about为路由懒加载
至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。