MyException - 我的异常网
当前位置:我的异常网» JavaScript » Vue.js2路由学习二

Vue.js2路由学习二

www.MyException.Cn  网友分享于:2013-10-08  浏览:0次
Vue.js2路由学习2

想学习Vue的SPA应用,路由这一块是必不可少的。相信很多和我一样刚接触前端的朋友对于路由这玩意是很困惑的。所以在我学习并成功使用了vue-router后,将我的个人经验分享出来,希望可以让同样对路由不知所措的同学有所帮助。

注意:

  • 本文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/VueStudyDemos

Vue.js学习系列

文章评论

“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
如何成为一名黑客
如何成为一名黑客
鲜为人知的编程真相
鲜为人知的编程真相
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
那些争议最大的编程观点
那些争议最大的编程观点
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
代码女神横空出世
代码女神横空出世
一个程序员的时间管理
一个程序员的时间管理
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员必看的十大电影
程序员必看的十大电影
程序员的鄙视链
程序员的鄙视链
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
10个调试和排错的小建议
10个调试和排错的小建议
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
我的丈夫是个程序员
我的丈夫是个程序员
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
中美印日四国程序员比较
中美印日四国程序员比较
每天工作4小时的程序员
每天工作4小时的程序员
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
程序员应该关注的一些事儿
程序员应该关注的一些事儿
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
老程序员的下场
老程序员的下场
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
旅行,写作,编程
旅行,写作,编程
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
 程序员的样子
程序员的样子
程序员和编码员之间的区别
程序员和编码员之间的区别
编程语言是女人
编程语言是女人
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
为什么程序员都是夜猫子
为什么程序员都是夜猫子
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
Java程序员必看电影
Java程序员必看电影
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有