一.什么是vue-router
vue-router路由插件,这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。
二.vue-router安装
安装vue-router
vue-router是一个插件包,所以我们还是需要用npm或cnpm来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。
npm install vue-router --save-dev
解读router/index.js文件
我们用vue-cli生产了我们的项目结构,你可以在src/router/index.js文件,这个文件就是路由的核心文件,我们先解读一下它。
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称,
component: Hello //对应的组件模板
}
]
})
上边的代码中已经对每行都进行了注释,其实在这个路由文件里只配置了一个功能,就是在进入项目时,显示Hello.vue里边的内容代码。
三.vue-router路由配置(一级路由)
1.新建details.vue/sort.vue/mine.vue文件,具体写法如下
2.App.vue文件
3.index.js文件(路由配置文件)
效果如图:
四.vue-router路由配置(二级路由)
1.新建login.vue/register.vue两个文件
2.在首页的组件下编写router-link路径
3.配置路由,二级路由用children属性实现,注意:二级路由路径不用写"/","/"表示找子路径,这里直接写组件名称即可。
五.单页面多路由区域操作
“单页面多路由区域操作”,实际需求是这样的,在一个页面里我们有2个以上<router-view>区域,我们通过配置路由的js文件,来操作这些区域的内容。也就是不同的router-view对应不同的组件。便于样式设置。如图:我想在Helloworld文件下,让<router-view name="left"></router-view>对应登录组件,让<router-view name="right"></router-view>对应注册组件。
在index.js文件下配置路由文件