Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)
2016-12-22 10:41
841 查看
想学习Vue的SPA应用,路由这一块是必不可少的。相信很多和我一样刚接触前端的朋友对于路由这玩意是很困惑的。所以在我学习并成功使用了vue-router后,将我的个人经验分享出来,希望可以让同样对路由不知所措的同学有所帮助。
本文知识点是基于Vue2.0和vue-route 2的,更多内容请参考Vue.js官网和vue-router 2官方文档:
执行命令完成vue-router的安装,并在package.json中添加了vue-router的依赖。当我们在其他电脑上安装项目时只需要执行
package.json
如果是要安装在开发环境下,则使用以下命令行:
package.json
官方提供的demo很简单,复制到HTML中也的确能跑,但是问题是不知道如何在SPA应用中使用,这坑了我不少时间。在看了不少他人的项目后,完成了SPA路由的简单实现demo(基于vue-cli的webpack模板)。
main.js
App.vue
page01.vue
page02.vue
代码很简单,具体可以看下DEMO
实现步骤:
1.
2.
3. 定义路径数组
4. 将路由注入到Vue对象中
5. 在根组件中使用
6. 在根组件中使用
7. 创建子组件
点击这个
注意:
那么问题来了,如果是全局注册的路由
push方法其实和
**注意:**push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
template
script
其实很好理解:go方法就是浏览器上的前进后退按钮,后面的参数就是前进和后退的次数
console中看到的路由信息对象
这两个参数会在页面跳转后写在路径中,路径相当于
传递过去的数据却没有包含params的数据。
下面是我暂时调试成功的一些结论。
路径后面的
此时路由跳转的路径
此时我们看到查看路由信息对象:
script
注:暂时我只发现在动态路由匹配中传入数据可以获取到params。而使用
script
路径结果
路由信息对象
template
script
Vue.js学习系列二 —— vuex学习实践笔记(附DEMO)
Vue.js学习系列三——axios和网络传输相关知识的学习实践
新浪微博: http://weibo.com/u/2640909603
掘金:https://gold.xitu.io/user/571d953d39b0570068145cd1
CSDN: http://blog.csdn.net/violetjack0808
简书: http://www.jianshu.com/users/54ae4af3a98d/latest_articles
Github: https://github.com/violetjack
注意:
本文demo的项目结构用的是最新的命令行工具创建的webpack项目模板;本文知识点是基于Vue2.0和vue-route 2的,更多内容请参考Vue.js官网和vue-router 2官方文档:
一、路由的安装:
npm安装
可以使用npm直接安装插件npm install vue-router --save
执行命令完成vue-router的安装,并在package.json中添加了vue-router的依赖。当我们在其他电脑上安装项目时只需要执行
npm install即可完成安装。(感谢 @waynezheng、@昊哥哥 指出的关于dependency的问题,已更正^-^。)
package.json
"dependencies": { ... "vue-router": "^2.1.1" ... },
如果是要安装在开发环境下,则使用以下命令行:
npm install vue-router --save-dev
package.json
"devDependencies": { ... "vue-router": "^2.1.1", ... },
二、SPA中路由的简单实现(附demo)
下面让我们来配置路由并实现我们的第一次页面跳转。官方提供的demo很简单,复制到HTML中也的确能跑,但是问题是不知道如何在SPA应用中使用,这坑了我不少时间。在看了不少他人的项目后,完成了SPA路由的简单实现demo(基于vue-cli的webpack模板)。
main.js
import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import Page01 from './components/page01' import Page02 from './components/page02' Vue.use(VueRouter)//全局安装路由功能 //定义路径 const routes = [ { path: '/', component: Page01 }, { path: '/02', component: Page02 }, ] //创建路由对象 const router = new VueRouter({ routes }) new Vue({ el: '#app', template: '<App/>', components: { App }, router })
App.vue
<template> <div id="app"> <router-link to="/">01</router-link> <router-link to="/02">02</router-link> <br/> <router-view></router-view> </div> </template>
page01.vue
<template> <div> <h1>page02</h1> </div> </template>
page02.vue
<template> <div> <h1>page02</h1> </div> </template>
代码很简单,具体可以看下DEMO
实现步骤:
1.
npm安装
vue-router
2.
Vue.use(VueRouter)全局安装路由功能
3. 定义路径数组
routes并创建路由对象
router
4. 将路由注入到Vue对象中
5. 在根组件中使用
<router-link>定义跳转路径
6. 在根组件中使用
<router-view>来渲染组件
7. 创建子组件
三、路由的跳转
router-link
router-link标签用于页面的跳转,简单用法如上demo
<router-link to="/page01">page01</router-link>
点击这个
router-link标签
router-view就会渲染路径为
/page01的页面。
注意:
router-link默认是一个a标签的形式,如果需要显示不同的样子,可以在
router-link标签中写入不同标签元素,如下显示为
button按钮。
<router-link to="/04"> <button>to04</button> </router-link>
router.push
下面我们通过JS代码控制路由的界面渲染,官方是写法如下:// 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
那么问题来了,如果是全局注册的路由
Vue.use(VueRouter),应该怎么写呢?
// 字符串 this.$router.push('home') // 对象 this.$router.push({ path: 'home' }) // 命名的路由 this.$router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=private this.$router.push({ path: 'register', query: { plan: 'private' }})
push方法其实和
<router-link :to="...">是等同的。
**注意:**push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
router.replace
push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,不会向 history 栈添加一个新的记录。用法如下template
<router-link to="/05" replace>05</router-link>
script
this.$router.replace({ path: '/05' })
router.go
go方法用于控制history记录的前进和后退// 在浏览器记录中前进一步,等同于 history.forward() this.$router.go(1) // 后退一步记录,等同于 history.back() this.$router.go(-1) // 前进 3 步记录router.go(3) // 如果 history 记录不够用,那就默默地失败呗 this.$router.go(-100) this.$router.go(100)
其实很好理解:go方法就是浏览器上的前进后退按钮,后面的参数就是前进和后退的次数
四、路由的传参方式
在路由跳转的过程中会传递一个object,我们可以通过watch方法查看路由信息对象。
watch: { '$route' (to, from) { console.log(to); console.log(from); }, },
console中看到的路由信息对象
{ ... params: { id: '123' }, query: { name: 'jack' }, ... }
这两个参数会在页面跳转后写在路径中,路径相当于
/page/123?name=jack
1. params
其实这个params我还是有一些疑惑的,就比如下面的写法:<router-link :to="{ path: '/05', params: { sex: 'hello param', sex2: 'hello param2' }, query: { name: 'hello query', name2: 'hello query2' }}">05</router-link>
传递过去的数据却没有包含params的数据。
{ ... params: {}, query: { name: 'hello query', name2: 'hello query2' } ... }
下面是我暂时调试成功的一些结论。
传递数据
在路由配置文件中定义参数//命名路由&路由传参 { name: 'com03', path: '/03/:sex', component: Page03 },
路径后面的
/:sex就是我们要传递的参数。
this.$router.push({ path: '/03/441'})
此时路由跳转的路径
http://localhost:8080/#/03/441
此时我们看到查看路由信息对象:
{ ... params: { sex: '441' } ... }
获取数据
template<h2> {{ $route.params.sex }} </h2>
script
console.log(this.$route.params.sex)
注:暂时我只发现在动态路由匹配中传入数据可以获取到params。而使用
{ path: '/', params: { sex: '123' }, query: { ...}}传递的数据使用没有传递给下一个页面组件。如果有使用成功的同学欢迎在留言,我会及时更正的。
2. query
query传递数据的方式就是URL常见的查询参数,如/foo?user=1&name=2&age=3。很好理解,下面就简单写一下用法以及结果
传递数据
template<router-link :to="{ path: '/05', query: { name: 'query', type: 'object' }}" replace>05</router-link>
script
this.$router.replace({ path: '/05', query: { name: 'query', type: 'object' }})
路径结果
http://localhost:8080/#/05?name=query&type=object
路由信息对象
{ ... query: { name: "query", type: "object" } ... }
获取数据
获取数据和params是一样的。template
<h2> {{ $route.query.name }} </h2>
script
console.log(this.$route.query.type)
Vue.js学习系列项目地址
https://github.com/violetjack/VueStudyDemosVue.js学习系列
Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)Vue.js学习系列二 —— vuex学习实践笔记(附DEMO)
Vue.js学习系列三——axios和网络传输相关知识的学习实践
关于作者
VioletJack,移动、前端工程师,两年移动端工作经验、一年前端工作经验。现专注于移动前端的学习和开发。擅长Android开发和Vue前端开发。会定期产出关于Android、Vue、移动前端相关的博文。欢迎大家关注我,我会用心维护和经营好博客,多产出高质量文章。同时也希望我所写的东西可以帮到有需要的朋友。新浪微博: http://weibo.com/u/2640909603
掘金:https://gold.xitu.io/user/571d953d39b0570068145cd1
CSDN: http://blog.csdn.net/violetjack0808
简书: http://www.jianshu.com/users/54ae4af3a98d/latest_articles
Github: https://github.com/violetjack
相关文章推荐
- Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)
- Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)
- Vue.js学习系列二 —— vuex学习实践笔记(附DEMO)
- Vue.js学习系列二 —— vuex学习实践笔记(附DEMO)
- Vue.js学习系列二 —— vuex学习实践笔记(附DEMO)
- Vue.js学习系列二 —— vuex学习实践笔记(附DEMO)
- vue-router2学习实践笔记(附DEMO)
- Vue.js学习系列二 —— vuex学习实践笔记(附DEMO)
- Vue学习笔记进阶篇——vue-router安装及使用
- VUE2.0 全套 demo 讲解(学习笔记)
- Vue.js第二天学习笔记(vue-router)
- Vue-Router基础学习笔记(小结)
- Vue.js学习系列三——axios和网络传输相关知识的学习实践
- vue学习笔记---tap切换配置(vue-router)
- vue-router学习笔记
- Vue学习笔记10——demo地址
- Vue.js学习系列四——Webpack学习实践
- vue学习笔记:vue-router参数
- Vue.js学习系列三——axios和网络传输相关知识的学习实践
- vue-router的学习笔记--1