Vue Router 4 的使用，一篇文章给你讲透彻

Vue 3.X 使用Vue Router 4.x 进行路由配置，本文我们就来研究下如何使用Vue Router 4.x，本文中所有的使用方式都是使用 Composition API的方式。

本文通过一步步介绍Vue Router 4.x的使用，来搭建一个简单的博客系统，让你对新版的Vue Router 4.x有一个完整的认识，然后能够非常轻松滴将Vue Router 4.x应用在自己的项目中。

项目初始化

项目搭建

项目使用vite进行创建。

npm init vite@latest vue-router-blog
npm install
npm run dev

目前安装的是Vue 3.2.25

配置vite.config.js

我们配置@别名，这样就比较方便书写引入文件的路径

// 引入文件
const path = require("path");

export default defineConfig({
  // 添加 @
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  plugins: [vue()],
});

配置jsconfig.json

jsconfig.json可以让VSCode更加智能

{
  "include": [
    "./src/**/*",
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Vue Router 4初体验

安装Vue Router 4

npm i vue-router@4

目前安装的是Vue Router 4.0.12

创建两个页面Home.vue和About.vue

<!-- Home.vue -->
<template>
  <div>
    主页
  </div>
</template>


<!-- About.vue -->
<template>
  <div>
    关于页
  </div>
</template>

这两个页面很简单，每个页面仅仅就是显示一行文字

创建router

我们在src目录下新建router目录，在router目录下创建index.js文件, 在里面进行路由的信息配置。

import { createRouter, createWebHistory } from "vue-router";

// 引入
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

// 路由信息
let routes = [
  {
    path: "/",
    name: 'home',
    component: Home,
  },
  {
    path: "/about",
    name: 'about',
    component: About,
  },
];

// 路由器
const router = createRouter({
  history: createWebHistory(), // HTML5模式
  routes,
});

export default router;

安装router

将路由安装router安装到app上。

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

// 引入插件
import router from "@/store/index";
// 安装router插件
createApp(App).use(router).mount('#app')

使用 router-link 和 router-view

修改App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" /><br />
  <div>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link><br />
  </div>
  <router-view></router-view>
</template>

至此，我们的就实现了页面间的切换功能了。

几个重要的概念

router-link组件和a标签的区别

router-link组件底层也是渲染的a标签，但是router-link的页面切换只是更新了页面的部分内容，不会进行整个页面的刷新，而a标签跳转(例如：<a href="/about">调到Home标签</a><br>)是对整个页面进行刷新。

底层原理是router-link劫持了元素的点击事件，添加了处理页面更新的逻辑。

Hash模式和HTML5模式的区别

Hash模式的URL中有一个#号，eg：http://localhost:3000/#/about, #号后面的就是Hash地址，这个模式以前是SPA的常用模式，但是链接有一个#号比较丑。

HTML5模式和正常的链接地址一样的，eg：http://localhost:3000/about, 这个地址很优雅，但是有一个问题，需要服务器支持。 原因是浏览器中输入http://localhost:3000/about支持，服务器以为要访问根路劲下的about目录的HTML文件，而不是访问根路劲下的HTML文件。

webpack和vite启动的服务器是支持HTML5模式的，所以开发环境使用HTML5模式没有问题。

router-link组件和router-view组件为什么能直接使用？

安装router插件的时候注册了这两个全局组件，所以能直接使用。

install(app: App) {
    app.component('RouterLink', RouterLink)
    app.component('RouterView', RouterView)
}

路由懒加载

上面写法有一个严重的问题，ro