路由的安装与配置

1.安装路由:

首先打开编辑器(此处编辑器为VSCode)

导入我们所用的项目：

上图中导入我们所用的项目：图中我的项目为myproject

将项目展开：此处是项目的整体架构

在配置路由之前要确保node_modules的安装，因为路由是安装在node_modules里面

打开终端（最上方的“...”）：

点击新建终端：

在终端输入：安装路由的指令：npm install vue-router@3  --save

输入完回车，出现正在安装的进度条

此处安装成功

2.配置路由：

所谓配置路由本质上就是给我们所定义的各个vue组件文件，配置对应的访问地址（url），废话不多说开干！！

（1）创建组件文件test.vue：

在项目中展开src，在src中找到components鼠标右键新建文件，创建组件文件命名为test.vue

（2）在src文件夹下创建/router/index.js 文件，用于作为路由文件

点击src文件夹右键创建router文件夹，在router文件夹里鼠标右键创建.js文件为路由文件

在components中创建我们所需的.vue文件并在创建组件文件中编写代码

注：不要着急编写代码，可以等配置完之后在开始编写，有利于代码找错

此处编写俩个组件文件为示例：

上图为第一个示例：login.vue中是一个登录界面

下图为第一个示例：register.vue中则是一个用户男女选择界面

（3）将路由文件index.js注册到main.js中

在注册之前必须在main.js中引入：import router from './router/index.js'

然后注册如下图所示：

 new Vue({

          router

         })

          

（4）配置路由文件内容：

在俩个.vue文件编写完成后在index.js中输入这些，代码旁都有注释：

必须写export default不然父组件App.vue接收不到！！！

其中路由对象是json对象，所以可以创建多个对象

(5)在父组件App.vue中引用：

 <router-view></router-view>

（6）启动项目：

打开终端输入：

npm run serve

回车：

此时启动成功点击端口：俩个都可以

打开端口按住ctrl+单击：

此时页面只有一个标题

这时候我们只需要在在浏览器地址栏上输入路由文件中的访问路径（path参数的值）：

例如:我们要打开login这个页面只需要在网址的后面输入login即可：

回车：

我们就发现login.vue中的内容呈现在这一页面中

同样的register也是一样：

此时我们发现该页面显示的是register.vue,而不是login.vue

总结：路由给我们带来更便捷的体验，不需要在App.vue中一个一个注册，代码简洁，同时在一个总界面上可以展示多个界面

注：小白一个如有不足请见谅，望诸君补充，我等受教，再次谢谢浏览！！！！