vue-路由配置和使用步骤整理
介绍
路由:控制组件之间的跳转,不会实现请求、不用页面刷新,直接跳转-切换组件》》》
安装
本地环境安装路由插件vue-router: cnpm install vue-router --save-dev
*没有安装淘宝镜像的可以将 cnpm 替换成 npm
想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024.html,(打开搜索 镜像 即可跳转到对应位置)
配置
两种配置方法:在main.js中 || 在src/router文件夹下的index.js中
这里只说在src/router/index.js中的
- 引入:
1 2 3 |
|
注意这个Router是自定义的名字,这里叫这个名字后,下边都要用到的
2. 使用/注册:
1 |
|
3. 配置
配置路由:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
4. 引入路由对应的组件地址:
1 2 3 |
|
5. 在main.js中调用index.js的配置:
1 |
|
6. App.vue页面使用(展示)路由:<!-- 展示router -->
把这个标签放到对应位置:
1 |
|
7. 路由切换(原来的<a href=”XXX.html”>等地方):把切换标签和链接改成:
1 2 3 |
|
//这里,to里边的参数和配置时,path的路径一样即可
贴一个源码:
main.js
main.js
src/router/index.js
src/router/index.js(router的主要配置文件)
App.vue 展示Vue
App.vue 的router-view 标签
导航页面的路由链接设置,用于切换组件
NavBar.Vue页面,主要用于页面切换的导航组件