VueRouter路由基础教程（Vue2）

一、作用及介绍

VueRouter为Vue官方的一个路由插件 （官方网址：https://v3.router.vuejs.org/zh/），是第一个第三方包，用于修改地址栏路径时，切换显示匹配的组件

---

二、基础步骤

1.前情提要

该教程为Vue2版本中的VueRouter使用，不同版本的vue中的VueRouter版本也不同

Vue2版本对应VueRouter3.x版本    Vue3版本对应VueRouter4.x版本

下载前请检查自己的vue版本

2.下载

在所需的项目中打开终端输入指令npm（或yarn） add vue-router@3.6.5（稳定版本）下载

3.引入（导包）

在main.js文件中导入下载好的插件

4.注册

5.创建路由对象

6.与new Vue对象关联

7.检验

在链接后出现#/即为路由配置成功

---

三、核心步骤

1.创建目录

在src目录下，创建views目录，并在该目录下创建需要的组件，组件的个数与名字与路由对应

注意：组件名称只用一个单词会报错，推荐使用大驼峰命名

2.配置路由规则

一条路由规则{path：自定义路径，component: 组件文件夹名}

3.配置导航链接和出口

在App.vue文件中，将导航链接修改成路由规则中的path路径，

并把路由出口（路径匹配的组件显示的位置）放在展示的位置