vue单页开发之router详解

话不多说，先认识下vite这个脚手架

vite

vite是一个管家，它可以帮我们生成一个完整的项目目录，并做好文件的引入。vite是vue作者额外打造一个vue的构建工具，是个小软件，电脑就可以用vue的一系列项目，构建一个项目该有的目录架构。vite脚手架比较老，现在都是在用cli脚手架，cli脚手架后面文章再聊

在我们实际写项目的时候，我们一般都会有很多页面，这时候就需要很多html文件，但是vue问世后，我们都选用了vue的单页开发，但vue就只有一个index.html文件

问题来了：其他页面如何展示？

我们可以把某单个页面弄成一个div，想看首页的时候只需要让首页展示，其余的页面div让他们不展示即可。这里又产生了一个新的问题，这样的话我想要定位到某个页面，它的地址会是什么样的，一直都是一个url吗？答案肯定不是的，vue中的router路由就完美解决了这个问题

我们也一起先看下它的优缺点：

单页开发优缺点

优点：

1. 爬虫无法爬数据
2. 打开首页加载所有div，一旦加载完成后跑到别的页面速度很快

缺点：

1. 首页加载慢

创建项目步骤如下：

先进入vite官网：开始 | Vite 官方中文文档 (vitejs.dev)

点击开始往下找可以看到安装指令，这里我们选用第一个。

1. 在指定的路径下打开终端输入：npm create vite@latest my-vue-app -- --template vue
my-vue-app是文件夹名称，自己拟定，这里我命名为vue-router
1. 接下来问你是否需要安装包，需要安装，这里我们直接回车
1. 接下来给你三个指令去选择：
cd vue-router 去到vue-router文件夹

npm install 安装依赖

npm run dev 运行该项目

这里我们关掉终端，去vscode打开vue-router终端，会方便很多
1. 逐个解释下vite帮你生成的各项文件
- .vscode 是默认给你生成的，你删掉都可以
- public文件：存放公用的配置资源。eg.整个项目共有图片......
- src：项目开发的地方
- src/assets：存放公共css和图片
- components：放组件
- App.vue：传统vue的template
- main.js：导入.vue读成对象进行挂载
- index.html：整个项目的页面
- package.json：项目说明书，项目依赖，开发依赖，（"scripts"）如何运行: dev运行，build代码打包，preview项目预览
1. npm i 安装依赖
安装完后生成node_modules，这里面存放所有的源码，里面的东西太多了，传仓库一般会把这个ignore掉
1. npm run dev 运行项目
1. ctrl单击链接生成默认页面。vite把所有的文件进行配合打包，最终弄成一个地址。页面是index.html，他引入了main.js，main.js又引入了App.vue等等，都是由js动态生成的，不是html写死的

以前是自己写template标签，vue读取然后传到create进行挂载，vue帮我们把写template改成写App.vue文件。App.vue的template会被引入到main.js函数体进行挂载。本质上和原始的写法一样，vite帮我们把template的代码分出去了，放到App.vue中

router是如何将多个页面放到一个页面，并且改变其地址的呢？

首先我们在views文件夹中随便写几个页面，一个首页，一个关于页面，然后首页下有最新内容和推荐内容页面，关于页面有活动页面和直播页面。

vue文件都是被当成字符串读走，最后会被转译成html，css，js代码。

这几个页面目录如下：

我们想要将这些页面放到一起，就需要在router路径中创建一个index.js将router抛出，让main.js导入

index.js

javascript 复制代码

import { createWebHistory, createRouter } from 'vue-router'
// ../上一个文件夹，就是src下
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Newest from '../views/homeChild/Newest.vue'
// 引导路由就可以充当页面来用

const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        // 路由重定向：给home的两个子页面一个默认子页面
        path: '/home',
        redirect: '/home/newest'
    },
    {
        path: '/about',
        redirect: '/about/Live'
    },
    // 每个页面都是一个花括号
    {
        // 这样就可以更改路径了
        path: '/home',
        component: Home, // 组件， 其实每个代码片段都是一个组件  打了引号就是字符串，这里得是变量
        children: [
            {
                // 二级路由不要斜杆
                path: 'newest',
                component: Newest
            },
            {
                path: 'recommend',
                component: () => import('../views/homeChild/recommend.vue')
            }
        ]
    },
    {   
        path: '/about',
        component: About,
        children: [
            {
                path: 'activity',
                component: () => import('../views/aboutChild/activity.vue')
            },
            {
                path: 'live',
                component: () => import('../views/aboutChild/live.vue')
            }
        ]
    },
]

const router = createRouter({
    history: createWebHistory(),  //这是其中一个路由模式：history， 还有hash模式
    routes: routes,  // key不能乱写
})

export default router
// 抛出就可以在另一个js引入

Vue单页应用(SPA)开发中，路由的变化可以通过浏览器的history和hash来实现，这两种模式你用哪个都可以，我这里用得history，hash模式的地址用#符号来表示。

引入模块：
javascript 复制代码
```
import { createWebHistory, createRouter } from 'vue-router'
```
从 vue-router 中引入了 createWebHistory 和 createRouter 这两个函数。它们分别用于创建路由的 history 对象和 router 对象。
引入组件：
javascript 复制代码
```
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Newest from '../views/homeChild/Newest.vue'
```
引入了三个组件，分别是 Home、About 以及 Newest。这里为了展示引入组件的另一个方法，就没有全部采用这个方式。
定义路由配置：
arduino 复制代码
```
const routes = [
    // ...
]
```
创建一个数组 routes，用于定义路由配置。每个路由配置是一个对象，包含了路径（path）、重定向（redirect）、组件（component）等信息。
路由配置：
css 复制代码
```
{
    path: '/',
    redirect: '/home'
},
```
首先，根路径 '/' 被重定向到 '/home'。这样页面一打开就是定位到/home主页。
css 复制代码
```
{
    path: '/home',
    redirect: '/home/newest'
},
```
然后，'/home' 被重定向到 '/home/newest'，给 home 页面的两个子页面一个默认子页面。这样页面一旦来到home页面就会重定向到newest子页面。
css 复制代码
```
{
    path: '/about',
    redirect: '/about/Live'
},
```
同理，'/about' 被重定向到 '/about/Live'，给 about 页面一个默认子页面。
路由嵌套和组件引入：
yaml 复制代码
```
{
    path: '/home',
    component: Home,
    children: [
        // ...
    ]
},
```
定义了名为 home 的路由，其组件为 Home，并包含了子路由数组 children。
css 复制代码
```
{
    path: 'newest',
    component: Newest
},
```
在 home 路由中定义了一个子路由，路径为 'newest'，对应的组件是 Newest。
css 复制代码
```
{
    path: 'recommend',
    component: () => import('../views/homeChild/recommend.vue')
}
```
同理，'recommend' 被定义为 home 路由的子路由，对应的组件是通过动态导入实现的。这是另外一种方法导入。
创建路由实例：
php 复制代码
```
const router = createRouter({
    history: createWebHistory(),
    routes: routes,
})
```
使用 createRouter 函数创建一个路由实例 router，配置使用 createWebHistory 创建的 history 对象，并传入之前定义的路由配置数组 routes。
导出路由实例：
arduino 复制代码
```
export default router
```
将创建的路由实例 router 导出，以便在其他文件中引入和使用。

那些子页面的代码有个快捷方式，vb，他会直接给你生成一个模板，但是你需要将scss改成css

比如我的活动页面Activity.vue如下：

xml 复制代码

<template>
    <div>
        <ul>
            <li>活动1</li>
            <li>活动2</li>
            <li>活动3</li>
        </ul>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="css" scoped>

</style>

我们最终需要在页面中点击home然后进入home页面实现跳转，以前我们是用a标签，这里我们就用router link，其本质还是a标签

App.vue

xml 复制代码

<template>
  <nav>
    <router-link to="/home">home</router-link> |
    <router-link to="/about">about</router-link>
  </nav>
  <!-- 路由入口：所有配了路由的结构都会搬到这里来写 注：router-view不能写注释 -->
  <router-view></router-view>
</template>

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

别忘了在main.js中导入router

main.js如下：

javascript 复制代码

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

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

最终效果展示：

注意地址栏的变化

初进页面：重定向到home，home再重定向到newest

点击关于页面：重定向到live

点击活动

最后

本篇文章主要解决了vue单页开发解决地址跳转的问题，其实就是其他页面（代码片段）被路由放进了index.html中，然后改变了地址。有不懂之处欢迎在评论区留言，如果觉得文章对你学习有所帮助，还请"点赞+评论+收藏"一键三连，感谢支持！

我的Gitee:codeSpace