目录

安装路由

手动创建一个路由的文件夹，并且里面创建一个index.js


项目中要使用路由，那么就安装路由，使用命令

npm install vue-router --save

输入命令之后，那么项目里面就已经安装了路由


以上的配置里面有这个，那么相当于这个项目里面安装了路由，项目里面就可以使用了。

项目里面配置路由，搭建路由的框架

之前的项目我们已经看见有这个


现在就在index.js 里面配置路由

//  配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
// 在vue对象里面安装插件
Vue.use(VueRouter)
// 创建路由对象
const routers = [

]

const router = new VueRouter({
    routers
})

// 将路由对象导出
export default router

在以上的index.js 里面创建路由对象，并且导出，在main.js 里面引入，并且配置就可以了


以上就是搭建路由的框架

配置路由的映射关系

一个路由是对应一个组件，也就是一个页面。现在我们先创建多个组件


就是在以上的这个命目录下创建页面。创建完成就是这样

以上就是创建了2个页面，每一个页面都需要一个路径，所以我们需要创建2个路径和我们创建的2个页面匹配，那么我们就需要在路由的index.js里面做匹配了，我们看之前index.js里面的路由框架，在这个路由框架里面写匹配


一个路径匹配一个页面
App.vue 里面的代码这样写，那么就可以展示了

总结

项目一启动，首先是加载main.js
因为main.js里面加载了App.vue ,所以开始加载App.vue 页面，我们访问路径，首先看到的就是App,vue的页面。
在App.vue页面有两个按钮，按钮上面有路径，我们一点击就走路由

就到了对应的页面