Vue中路由的使用

学习笔记

路由是运用于单页面的应用，它是一组key和value组合，key是路径，value在这里是组件，router监测路径（key）的改变，然后配置相应的组件（value）展示出来。

使用步骤

首先安装 npm i vue-router@3（如果使是vue2就安装这个）

引入import VueRouter from "vue-router"

引入后因为是插件，使用插件就是Vue.use(VueRouter)

创建一个路由 const router=new VueRouter({ }),里面的就是多个routes。 routes:[{key:value},{key:value}],其中key是有两个，一个是path路径，一个是组件，相当于这个路由是path1路径的component1组件。

配置好后去使用，控制切换部分为<router-link to="路径"></router-link> 这里相当于是a标签类似，href换成了to，a换成了router-link

展示切换的区域用<router-view></router-view>