2019-04-25vue-cli项目中配置单页面路由
2019-04-25 本文已影响0人
Kason晨
首先用vue-cli初始化项目。这里不再说了,直接说主要的。
要构建单页面应用,首先要配置前端路由。
1,安装路由
npm install vue-router --save
![](https://img.haomeiwen.com/i14707256/3680c32f12f3dbce.png)
2,在main.js中导入路由插件,并且实例化
![](https://img.haomeiwen.com/i14707256/3f72ee7e23f37f99.png)
3,写两个子组件 a 和 b .
![](https://img.haomeiwen.com/i14707256/778463cc32339d33.png)
4,配置路由,给a,b组件配置路由。
![](https://img.haomeiwen.com/i14707256/04cc608e2eacce5a.png)
5,配置首页,然后把项目跑起来。
![](https://img.haomeiwen.com/i14707256/39bc08a37894e813.png)
![](https://img.haomeiwen.com/i14707256/e5682eaa5c288238.gif)
要构建单页面应用,首先要配置前端路由。
npm install vue-router --save