Vue Router大揭秘：路由玩转指南

引言

前端路由是为了实现单页面应用（SPA）而存在的重要概念。在传统的多页面应用中，每次用户与页面交互时都需要向服务器请求新的页面，页面刷新会导致整个页面重新加载，这样会造成页面闪烁、加载时间延长等用户体验问题。而使用前端路由可以解决这些问题，提升用户体验。前端路由实现了页面内容的动态切换，用户在访问不同页面时不需要整页刷新，只需局部更新页面内容，提升了用户体验。此外，前端路由还可以减少服务器负担，提高网站性能，快速响应用户操作，支持SPA架构，保持页面状态和数据，是现代Web应用开发中不可或缺的重要技术。所以今天我们来聊聊前端路由的基本使用。

正文

在介绍路由之前呢我们先来创建项目，我们先使用npm create vite@latest 项目名称 -- --template vue这个指令创建项目，因为这个指令创建项目有以下优点：

1. 快速初始化：Vite 是一个快速构建工具，使用该指令可以快速初始化一个 Vue 项目，省去了手动配置和搭建项目的时间。
2. 现代化开发体验：Vite 提供了现代化的开发体验，支持快速的热更新、按需编译等特性，能够提升开发效率。
3. Vue 单文件组件支持 ：通过指定 --template vue 参数，可以创建支持 Vue 单文件组件的项目，方便开发和管理 Vue 组件。
4. 自动依赖安装：使用该指令创建项目时，npm 会自动下载并安装项目所需的依赖项，无需手动处理依赖安装。
5. 规范化项目结构：项目初始化时会生成一套规范化的项目结构，包括常见的目录结构和配置文件，有助于项目的组织和维护。

这是创建好的文件夹目录，我们先在src目录下创建一个router文件夹，在该文件夹里创建index.js文件，src/router/index.js 文件通常是前端项目中使用的路由配置文件。在Vue.js或React等前端框架中，通常会使用该文件来定义应用的路由规则，包括路径和对应的组件关系。

在这个文件夹里我们先写一点代码：

import { createWebHistory, createRouter } from 'vue-router'

const routes = [

]

const router = createRouter({
    history: createWebHistory(), // 路由history模式，还有一种hash模式
    routes: routes
})

export default router

我们刚开始看可能不太理解，我来解释一下这些代码的作用：

1. import { createWebHistory, createRouter } from 'vue-router' ：这行代码是从 Vue Router 库中导入 createWebHistory 和 createRouter 这两个函数，用于创建路由实例和路由历史模式。

2. const routes = [] ：这里定义了一个空数组 routes，用于存放应用的路由配置信息。在这个数组中可以添加各个页面的路由规则，例如路径和对应的组件。

3. const router = createRouter({ history: createWebHistory(), routes: routes }) ：这行代码创建了一个路由实例 router，使用了 createRouter 函数并传入了一个对象作为参数。其中：

   • history: createWebHistory()：指定了路由的 history 模式，这里使用的是基于 HTML5 History API 的 createWebHistory 函数，还有一种常见的路由模式是 hash 模式。
   • routes: routes：指定了路由的配置信息，即之前定义的 routes 数组。

4. export default router ：这行代码导出了创建好的路由实例 router，使得其他组件可以引入并使用这个路由实例。

然后我们在src文件夹下创建views文件夹，在里面再创建Home.vue和About.vue文件，里面内容随便打了，我填的是：

<template>
    <div>
        关于页面 // Home.vue里就是首页
    </div>
</template>

那我们接下来就是要用路由把这两个文件变成页面来用，那我们应该怎么做呢？那我们就要用到路由了，在这个大文夹里我们先下载一个依赖:npm i vue-router@4,然后在src/router/index.js文件里写出一下代码：

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

const routes = [

    {
        path: '/home',
        component: Home,
    },
    {
        path: '/about',
        component: About
    }
]

const router = createRouter({
    history: createWebHistory(), // 路由history模式，还有一种hash模式
    routes: routes
})

export default router

这段代码是一个简单的路由配置，定义了两个路由规则：

1. 导入组件：

   • import Home from '../views/Home.vue'：导入名为 Home 的组件，该组件通常用于展示主页内容。
   • import About from '../views/About.vue'：导入名为 About 的组件，该组件通常用于展示关于页面的内容。

2. 路由配置：

   • const routes = [...]：定义了一个数组 routes，用于存放路由规则。在数组中包含了两个对象，每个对象表示一个路由规则。

3. 路由规则对象：

   • 每个路由规则对象包含以下几个属性：

     • path：指定了路由的路径，即用户访问的URL路径。
     • component：指定了该路径对应的组件，即用户访问该路径时应该展示的组件。

4. 路由规则：

   • { path: '/home', component: Home }：定义了一个路由规则，当用户访问 /home 路径时，将展示 Home 组件的内容。
   • { path: '/about', component: About }：定义了另一个路由规则，当用户访问 /about 路径时，将展示 About 组件的内容。

那这样这两个页面就会生效了吗？当然不会，这个大文件夹最核心的就是index.html了，在这个文件里引入了main.js文件，在main.js里用了vue的源码，引入了App.vue，但没引入路由，所以我们还要在这个文件里引入路由：

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

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

1. import router from './router/index.js' ：这行代码导入了之前配置好的路由实例，即 router，这个路由实例包含了应用的路由规则和配置信息。

2. createApp(App).use(router).mount('#app') ：

   • createApp(App)：创建了一个 Vue 应用实例，并将根组件 App 作为参数传递给 createApp 函数。
   • .use(router)：通过调用 use 方法，将之前导入的路由实例 router 注入到应用实例中，这样应用就可以使用路由功能了。
   • .mount('#app')：将应用实例挂载到 HTML 页面中的 #app 元素上，即将根组件渲染到页面中，启动整个应用。

然后在App.vue文件里加上<router-view></router-view>，<router-view></router-view> 是 Vue Router 中的一个内置组件，用于显示当前路由匹配到的组件内容。当用户访问不同的路由路径时，Vue Router 会根据路由规则找到对应的组件，并将该组件的内容渲染到 <router-view> 中，实现页面内容的动态切换。

然后启动项目，修改项目路径，在项目路径后加入/home或者/about就会跳转到对应页面。

在vue项目中，App.vue就是所有的.vue后缀文件的大哥，不管我们配不配路由，我们最终都要被App.vue带着它一起挂载到html文件里去。但我们肯定不能自己改网页路径，那我们怎么让页面变成自己想要的页面呢，我们就在App.vue里操作：

<template>
  <nav>
    <router-link  to="/home">home</router-link> |
    <router-link to="/about">about</router-link>
  </nav>

  <router-view></router-view>
</template>

<style>
#app{
  text-align: center;
  font-size: 40px;
}
</style>

<nav>：定义了一个导航栏，包含了两个 <router-link> 组件，分别链接到 /home 和 /about 路径。当用户点击这些链接时，Vue Router 会根据配置的路由规则加载对应的组件内容。

然后我们拓展一点，要是我们要在home页面里还有页面的切换呢？那这就叫子路由，我们在views里创建一个文件夹homeChild，然后里面创建两个文件newest.vue和recommend.vue，然后步骤还是一样的，先在src/router/index.js创建他们的路由：

import { createWebHistory, createRouter } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Newest from '../views/homeChild/newest.vue'

const routes = [
    {
        path: '/home',
        component: Home,
        children: [
            {
                path: 'newest',
                component: Newest
            },
            {
                path: '/home/recommend',
                component: () => import('../views/homeChild/recommend.vue')
            }
        ]
    },
    {
        path: '/about',
        component: About
    }
]

const router = createRouter({
    history: createWebHistory(), // 路由history模式，还有一种hash模式
    routes: routes
})

export default router

这段代码里有两种子路由创建方法：

1. 相对路径的子路由：

   • { path: 'newest', component: Newest }：这种方式定义了一个相对路径的子路由。当父路由的路径为 /home 时，子路由的路径为 newest，即完整路径为 /home/newest。子路由的组件为 Newest，即当用户访问 /home/newest 路径时，会加载 Newest 组件显示在页面中。

2. 绝对路径的子路由：

   • { path: '/home/recommend', component: () => import('../views/homeChild/recommend.vue') }：这种方式定义了一个绝对路径的子路由。无论父路由的路径是什么，子路由的路径都是 /home/recommend。子路由的组件使用了懒加载的方式，通过 () => import() 异步加载 recommend.vue 组件。当用户访问 /home/recommend 路径时，会异步加载并显示 recommend.vue 组件。

那还有一个问题，我们进入页面都要点击才会出现相应的页面，那有没有什么办法是让它默认就存在的，当然有，还是在src/router/index.js文件里：

import { createWebHistory, createRouter } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Newest from '../views/homeChild/newest.vue'

const routes = [
    {
        path: '/',
        redirect: '/home' // 重定向
    },
    {
        path: '/home',
        component: Home,
        children: [
            {
                path: '/home',
                redirect: '/home/newest'
            },
            {
                path: 'newest',
                component: Newest
            },
            {
                path: '/home/recommend',
                component: () => import('../views/homeChild/recommend.vue')
                
            }
        ]
    },
    {
        path: '/about',
        component: About
    }
]

const router = createRouter({
    history: createWebHistory(), // 路由history模式，还有一种hash模式
    routes: routes
})

export default router

{ path: '/', redirect: '/home' } 这段代码表示了一个路由重定向的配置。当用户访问根路径 / 时，会自动重定向到 /home 路径，即页面会跳转到 /home 而不是显示根路径的内容。

路由重定向在前端路由中常用于将用户从一个路径重定向到另一个路径，可以用来处理用户访问不存在的路由或者提供更友好的路由路径。在这个例子中，当用户访问根路径时，会被重定向到 /home 路径，以确保用户总是从 /home 页面开始浏览应用程序。home里的也是同理。

总结

总结一下吧。在这篇文章中，涉及了 Vue Router 的基本概念和用法，包括路由的创建、导航、重定向等内容。总结如下：

1. Vue Router：Vue Router 是 Vue.js 官方的路由管理器，用于实现单页面应用（SPA）中的路由功能。
2. 路由创建：通过配置路由表来定义不同路径对应的组件，可以使用对象字面量的方式定义路由对象，包括路径和对应的组件。
3. 路由导航 ：使用 <router-link> 组件来创建导航链接，用户点击链接时会根据路由规则加载对应的组件内容，并在 <router-view> 中显示。
4. 子路由：可以在父路由中定义子路由，通过相对路径或绝对路径来配置子路由的路径和对应的组件。
5. 路由重定向：通过配置重定向规则，可以将用户从一个路径重定向到另一个路径，通常用于处理不存在的路由或提供更友好的路径。