[Vue] vue-router路由单页面应用开发

Vue-router学习

一、开启我们的第一个项目

我们在上篇文章就已经学到，如何利用脚手架开启一个vue项目了，今天，我们就通过vite开启我们项目来学习vue-router

如果你不知道如何开启一个项目可以看看：[vue]学习使用vite和cli脚手架开启你自己的vue项目！ - 掘金 (juejin.cn)

选择使用vite开始项目！安装完项目之后就可以开始我们的学习啦!注意，大家可以先把项目默认的内容清除哦！

二、学习vue-router的使用

当我们需要完成SPA开发(单页面应用开发)的时候，就不得不说一下vue-router了！

简单的意思就是，当我们需要在一个页面实现多个页面的转换，而不经过跳转的开发模式，也就是让多个页面在一个页面中实现！

1、为你的项目安装路由

首先第一步，我们需要为我们的项目安装路由的依赖，使用npm install vue-router@4安装路由！

使用VS code进入到项目目录下，打开终端输入npm install vue-router@4

安装成功之后，开始我们接下来的操作！

2、为全局配置好路由

首先，在我们的src目录下新建一个文件夹router ，在文件夹下面新建一个index.js文件，（其实名字都是自己取的，到时候导入的时候把名字写对就行。）

接下来，我们要配置我们的index.js文件 ，这里我们先导入import {createWebHistory,createRouter} from 'vue-router'这里涉及到了vue路由的两种模式，我们会在后面解析路由原理中讲到！

import { createWebHashHistory,createRouter, createWebHistory } from "vue-router";//导入

//这里用于存放我们的vue-router组件
const routes = [

]
//这里用于创建一个路由
const router = createRouter({
    history:createWebHistory(),//这里有两种模式，我们选择的是history模式还有一种hash模式
    routes:routes//引入我们的组件数组
}
)

export default router//抛出我们的路由

这里主要分为四个步骤

• 第一步：导入相对性的包
• 第二步：配置我们的路由组件
• 第三步：创建一个路由，设定路由模式，引用我们的组件
• 第四步：将我们的路由默认抛出（要想别的组件能够引用我们的路由，我们就得将这个路由抛出）

接下来，我们要配置main.js文件，这里是我们整个项目配置地方

我们需要将我们建立的组件应用到整个页面当中！我们这样做！

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

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

好啦！这样我们整个配置就基本上配置好了，接下来就可以开始编写我们的路由了！

3、编写路由页面

首先，我们假设一个场景，在页面上，我们需要一个首页 和一个名单，点击首页会显示一些东西，点击名单会显示一些名单，同时，页面不会发生跳转，且首页和名单这两个标签不会消失，实现在页面内进行改变！

那我们就从App.vue开始(其实更加推荐的是所有的页面都使用不同的组件，而App.vue只需要负责配置这些页面即可，这里是方便大家学习，我们这样做！)

App.vue

<script setup>
</script>

<template>
  <div>
    <router-link to="/home">首页</router-link>|
    <router-link to="/list">名单</router-link>
  </div>
  <router-view></router-view>
</template>

<style scoped>
*{SS
  text-align: center;
  font-size: 40px;
}
</style>

我们可以看到，在整个App.vue当中我们有两个新的标签<router-link to=""></router-link>和<router-view></router-view>

给大家介绍一下：

<router-link to="">这个标签，其实就是相当于一个a标签，通过点击我们进行相应的url地址，而to则表示我们要到达的地址！

<router-view>这个相当于一个入口，代表我们路由的入口，也就是说，路由中的内容会这个标签所在的DOM结构位置出现！

这里，我们就可以看到页面效果了！

我们点击首页对应的地址会变为：http://localhost:5173/home

点击名单对应的地址会变为：http://localhost:5173/list

接下来，我们就要取实现这样两个页面

基本配置+Home.vue

我们可以在src目录下新建一个文件夹，用于存放不同的页面（当然你也可以不必如此），在新建一个Home.vue文件

<template>
    <div>
        <ul>
            <h1>这里是首页</h1>
            <h2>这里是首页</h2>
            <h3>这里是首页</h3>
            <h4>这里是首页</h4>
        </ul>
    </div>
</template>

好，这么页面我们就简单写成这样，那你会疑问，页面上还是没有这个啊，不着急，我们需要配置一下！来到router文件夹下的index.js文件

import home from '../views/Home.vue'

const routes = [
    {
        path:'/home',
        component: home
    }
]

在index.js文件中，我们将刚刚编写的Home.vue文件导入进来，用home来表示它

接下来就需要在routes路由页面当中进行配置，数组里面存放一个又一个的对象，表示不同的页面。

添加一个对象到数组中，这个对象有两部分：

path表示路由路径 --当然要于你链接的路径一致，也就是<router-link to=''>中to的目标地址一致

component表示路由组件--表示要使用的组件是哪一个，也就是要使用的页面是哪一个文件

配置好之后，我们再点击首页：

这样，我们的效果就实现啦！！

同样的，我再写一个名单界面

子路由+List.vue

同样是在views文件下新建一个文件List.vue

<template>
    <div>
        <!-- 子路由 -->
        <router-link to="/list/yanyan">大肥羊</router-link>|
        <router-link to="/list/xiongxiong">狗熊岭</router-link>
        <router-view></router-view>
    </div>
</template>

这里我们将用到子路由！可以看到我们使用同样的原理新建了两个<router-link>

注意 ，子路由的地址一定要填写完整，不能写成to='/yanyan'这种，要加上父路径的地址to='/list/yanyan'

接下来，我们可以在views文件中在新建一个文件夹children，再在这个文件下新建两个文件yanyan.vue和xiongxiong.vue

yanyan.vue

<template>
    <div>
        <ul>
            <h4>喜羊羊</h4>
            <h4>沸羊羊</h4>
            <h4>美羊羊</h4>
            <h4>懒羊羊</h4>
            <h4>慢羊羊</h4>
        </ul>
    </div>
</template>

xiongxiong.vue

<template>
    <div>
        <ul>
            <h4>熊大</h4>
            <h4>熊二</h4>
            <h4>李老板</h4>
            <h4>光头强</h4>
            <h4>吉吉</h4>
        </ul>
    </div>
</template>

接下来，我们要做的就是配置好路由文件下的index.js文件

按照上一步操作

import { createWebHashHistory,createRouter, createWebHistory } from "vue-router";
import home from '../views/Home.vue'
import list from '../views/List.vue'
const routes = [
    {
        path:'/home',
        component: home
    },
    {
        path:'/list',
        component:list
    }
]

我们先将List.vue引入到页面当中！这样，我们再点击名单时就会出现：

接下来，如何配置子路由呢？

同样导入子路由先

我们需要在对应父路由下加入一个children属性，也是存放一个数组，数组里面存放对象用于展示不同的页面

这样我们的配置文件会写成这样：

import { createWebHashHistory,createRouter, createWebHistory } from "vue-router";
import home from '../views/Home.vue'
import list from '../views/List.vue'
import yanyan from '../views/children/yanyan.vue'


const routes = [
    {
        path:'/home',
        component: home
    },
    {
        path:'/list',
        component:list,
        children:[
            {
                path:'yanyan',
                component:yanyan
            },
            {
                path:'/list/xiongxiong',
                component:()=>import('../views/children/xiongxiong.vue')
            }
        ]
    }
]

先介绍导入部分：我们可以使用两种导入方式

​ 第一种是在头部直接导入：

import yanyan from'../views/children/yanyan.vue'

​ 第二种是在component属性中导入:

component:()=>import('../views/children/xiongxiong.vue')

同样的，我们首先配置好了list的路由之后，添加了一个属性children，以同样的方式，用数组存储对象配置子路由！

在配置子路由的路径时，也有两种方式：

​ 第一种是不要加/,直接写path:'yanyan'

​ 第二种是加/,但是要把路径写完整path:'/list/xiongxiong'

这样我们的效果就实现啦！

重定向

不知道大家有没有发现，当我们进入页面或者名单当中，一开始那些内容是不显示的，而是要通过我们点击才会显示！万一以后你要写项目，页面上一开始空空如也多不美观？比如你想要让页面默认显示内容的时候，我们就要使用重定向了！！

如何使用重定向，我们就需要在父级路由当中再添加一个对象，用于重定向，比如我们要让页面默认显示首页的内容,我们要这样做！

const routes = [
    //这里是重定向！
    {
        path:'',
        redirect:'/home'
    },
    {
        path:'/home',
        component: home
    },
    {
        path:'/list',
        component:list,
        children:[
            {
                path:'yanyan',
                component:yanyan
            },
            {
                path:'/list/xiongxiong',
                component:()=>import('../views/children/xiongxiong.vue')
            }
        ]
    }
]

可以看到，我们又添加了一个对象，其中有两个属性path和redirect，path 对应的是当前的URL地址，而redirect表示你要重定向的地址也就是你要展示的页面,这样当我们每次进入页面当中，都会默认显示首页中的内容。

同理！在名单页面当中，如果我们要默认显示yanyan.vue中的内容,我们也只需要在yanyan.vue的父路由中添加一个重定向！

{
    path:'/list',
    component:list,
    children:[
        {
            path:'/list',
            redirect:'/list/yanyan'
        },
        {
            path:'yanyan',
            component:yanyan
        },
        {
            path:'/list/xiongxiong',
            component:()=>import('../views/children/xiongxiong.vue')
        }
    ]
}

看看效果吧！

三、如果你不会清空项目，请看这里

安装成功后，项目会自动为我们按照一部分的基本结构和样式等等，我们将项目中自动生成的，不需要的部分删除掉！

1、从main.js开始

将图中这行删除！

2、清空App.vue

我们将App.vue中的元素删除成如图，只有基本结构即可！

3、删除文件

将如图的文件都删除掉，我们的项目基本上就干净啦！

最后

今天，我们有关vue-router的基本使用就学习到这里啦！！

后续我还会为大家持续输出vue中的知识点！大家感兴趣的可以关注一下博主哦！😁

大家都看到这里了，点个赞再走呗！🌹🌹

个人Github：一个修远君的库 (github.com)