注意：
- 本文demo的项目结构用的是最新的命令行工具创建的webpack项目模板；
- 本文知识点是基于Vue2.0和vue-route 2的，更多内容请参考Vue.js官网和vue-router 2官方文档：
一、路由的安装：
npm安装
可以使用npm直接安装插件
npm install vue-router --save
npm install vue-router --savenpm install即可完成安装。（感谢 @waynezheng、@昊哥哥 指出的关于dependency的问题，已更正^-^。）
package.json
"dependencies": {
...
"vue-router": "^2.1.1"
...
},如果是要安装在开发环境下，则使用以下命令行：
npm install vue-router --save-devpackage.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
})
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 实现步骤：
npm
- 安装
vue-routerVue.use(VueRouter)
- 全局安装路由功能
- 定义路径数组
routes
- 并创建路由对象
router
- 将路由注入到Vue对象中
- 在根组件中使用
<router-link>
- 定义跳转路径
- 在根组件中使用
<router-view>
- 来渲染组件
- 创建子组件
三、路由的跳转
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' }})<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方法就是浏览器上的前进后退按钮，后面的参数就是前进和后退的次数
四、路由的传参方式
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
/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
