Vue自学之路(2)——路由 Vue Router 4.X 插件

        本系列文章详细阐述基于Vue 3.X + Webpack 5.X，从徒手搭建项目开始到各个常用插件的配置和应用，目的是让学习者能快速掌握项目结构及vue的开发要领。

        

1. 概述

        路由简单来讲就是页面跳转的控制，这里的页面可以是整体，也可以是局部。vue提供了较为灵活和多样的路由控制手段。

2. 插件安装

npm install vue-router -S

3. 路由的基本使用

3.1 创建目录

        在 src 下创建 router 目录

3.2 创建路由

        在 router 目录下创建 index.js 文件，其内容如下：

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

const routes = [
    {
        path: '/',        // 访问'http://localhost/' 加载 views/Home.vue
        component: () => import('@/views/Home')
    },
    {
        path: '/about',   // 访问'http://localhost/about' 加载 views/About.vue
        component: () => import('@/views/About')
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
})

export default router

        注：官网上的 VueRouter.createRouter 命令存在陷阱，其不报错，但页面无信息

3.3 启用路由

        main.js 文件中添加如下代码以启用路由功能：

// 在顶部添加下列代码
import router from './router'   // 引入 vue-router

// 在 const app = createApp(App) 语句下添加如下代码
app.use(router)

3.4 添加路由视窗

        在 App.vue 文件的 template 中添加 <router-view/>，如下：

<template>
  <div id='app'>你好！你核酸了吗？</div>
  <router-view/>
</template>

        其中，路由跳转的视图将显示在 router-view 标签的位置

3.5 添加视窗

        根据路由中的定义分别创建 views/Home.vue 和 views/About.vue 文件，具体如下：

        src/views/Home.vue 文件内容如下：

<template>
    <div>
        HOME
    </div>
</template>

<script>
export default {
    
}
</script>

        src/views/About.vue 文件内容如下：

<template>
    <div>
        About
    </div>
</template>

<script>
export default {
    
}
</script>

3.6 编译并访问站点

        执行 npm run dev后，可以在浏览器中看到如下效果：

3.7 访问About

        想要显示 views/About.vue 的内容，如果用 localhost:8080/about 来访问就会得到如下报错信息：

         这是因为，我们的 <route-view/> 是放置在 App.vue 里的，并非放在 index.html 里的，About.vue 相当于 App.vue 的子页面，因此，执行过程中，程序首先需要加载 index.html 的 App.vue，然后才能在 App.vue 的 template 中显示通过 router/index.js 跳转的一切内容。

        可以使用如下URL来正确访问 About.vue：

4. router-link

4.1 语法

<router-link to="/">Go to Home</router-link>

4.2 效果

        我们将下面语句分别放置在 App.vue 和 Home.vue 中，看看具体效果有何不同，从而分析 router-link 的实际执行过程。

<router-link to="/about">About</router-link>

        先放置在 App.vue 中，具体如下：

<template>
  <div id='app'>你好！你核酸了吗？</div>
  <router-view/>
  <router-link to="/about">About</router-link>
</template>

<script>
export default {
  
}
</script>

<style>
    div {
        color: red
    }
</style>

        编译后显示：

         点击 About 链接后显示：

        下面我们将链接放到 Home.vue 中，具体如下：

<template>
    <div>
        HOME
        <router-link to="/about">About</router-link>
    </div>
</template>

<script>
export default {
    
}
</script>

        编译后显示如下：

        点击 About 后显示如下：

        经过两种方式的测试，说明 route-link 的作用是触发 router-view 部分的页面进行局部更新，若链接不属于 router-view 的一部分，那么链接本身不受任何影响。