基本使用
其实vue全家桶学起来还是很简单的,只要了解了vue的思路,顺着思路学习很easy。
// 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 定义(路由)组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 关键部分
const app = new Vue({
//vue中使用router需要指定一个router属性,这个属性的值要是VueRouter的对象
router: new VueRouter({
//实例化VueRouter,需要给routes属性,传入一个路由的配置信息,是一个对象数组
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
}).$mount('#app')
// 现在,应用已经启动了!
看到代码的注释,就可以明白如何使用了吧,下面我们来对代码进行一下拆分,方便管理。而且可以使用全局路由钩子,上面的写法是无法使用全局路由钩子的,因为他直接进入了vue内部。我们只能在组件内取得路由对象了。
下面看一下官方的代码,这是经过了拆分的
// 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在,应用已经启动了!
看到上面的例子,我们就明白使用路由分4步(0步不算,引入vue和vue-router是必须的)。
在第一步,我们定义了一些对象,也可以使用import引入。
从第2步开始,主角登场啦。routes中定义了所有的路由,他是一个配置集合。
第3步将定义了一个router这是一个VueRouter对象(我们先叫他路由控制器)。
第4步创建一个vue对象,并将router(也就是VueRouter的对象注入),至此所有任务完成。
像上面这种简单的例子,其实可以简写为一下方式
实例化后vue中会被注入两个对象
$router 这是router 实例可以使用所有router的方法和属性
$route 当前激活的路由信息对象。这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它。
在组件中使用
在组件中使用有两个参数
<template>
<div class="post">
<div class="loading" v-if="loading">
Loading...
</div>
<div v-if="error" class="error">
{{ error }}
</div>
<div v-if="post" class="content">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
</div>
</div>
</template>
export default {
data () {
return {
loading: false,
post: null,
error: null
}
},
created () {
// 组件创建完后获取数据,
// 此时 data 已经被 observed 了
this.fetchData()
},
watch: {
// 如果路由有变化,会再次执行该方法
'$route': 'fetchData'
},
methods: {
fetchData () {
this.error = this.post = null
this.loading = true
// 使用this.$route.params.id获取id参数
getPost(this.$route.params.id, (err, post) => {
this.loading = false
if (err) {
this.error = err.toString()
} else {
this.post = post
}
})
}
}
}
$route除了有params还有其他一些属性看这里https://router.vuejs.org/zh-cn/api/route-object.html
$router 的所有方法和属性看这里https://router.vuejs.org/zh-cn/api/router-instance.html
至于上面提到的钩子可以去这里看https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
本篇文章主要是介绍vue router的初始化,了解了初始化和组件内使用$route就理解了vue router的使用思路,看起官方文档也就有事半功倍的效果。