Vue.js学习系列一 —— vue-router2学习实践笔记（附DEMO）

想学习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=privaterouter.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=privatethis.$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学习系列

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