跳至主要內容

集成路由

刘春龙原创...大约 1 分钟WEB前端Vue3路由教程文档

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

npm init vue@latest

将路由集成进去

启动后访问http://localhost:5173/homehttp://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为路由懒加载

上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7