Vue(12)——路由的基本使用

VueRouter

作用：修改地址栏路径时，切换显示匹配的组件

基本步骤（固定）

1. 下载：下载VueRouter模块到当前工程
2. 引入
3. 安装注册
4. 创建路由对象
5. 注入，将路由对象注入到new Vue 实例中，建立关联

 

发现了#/表示当前的Vue实例已经被路由所管理。

 

---

完成前面固定的五个步骤，还剩下两个核心步骤

1. 创建需要的组件（views目录），配置路由规则
2. 配置导航，配置路由出口（路径匹配的组件显示位置）

新建一个名为views的文件夹，创建了三个我需要的组件

 

接下来在main.js文件中配置规则

第二步配置路由出口，找到app.vue

路由的封装抽离

向上面的所有路由配置在main.js中并不合适，可以将路由模块抽离出来，拆分模块利于维护。

首先在src文件夹下面创建router文件夹，再在下面创建index.js文件,将前面main.js里面关于路由的代码移到index.js里面，再重新导入vue核心包。

然后再导出：

还要在main.js中引入router:

 

注：将main.js中的代码移到index.js的过程中，vue的路径也需要手动改变，也有一个简便写法:'@/views/'，@相当于src，直接在src文件夹下面查找views.: