Vue 全家桶学习笔记 —— Vue Router 的基础使用
Vue 全家桶学习笔记 —— Vue Router 的基础使用
想要使用 Vue 来制作一个单页面应用，那么久不得不使用两个 Vue 官方提供的两个工具（当然你也可以不使用）——一个是页面路由工具 Vue Router，另一个是状态管理工具 Vuex。本篇文章先来说说 Vue Router 的基础使用
基础使用与配置
在引入 vue.js 和 vue-router.js 后，首先创建一个 VueRouter 实例，然后再将这个实例挂载到 Vue 的实例上
// routes 为 router 的配置参数
const routes = [...]
const router = new VueRouter({routes})
const app = new Vue({
el: '#app',
router
})
配置参数 routes 是一个数组，数组中为每一个路由的配置对象。每个配置对象都有如下一些属性：
/**
* @param path {String} 路由路径参数
* @param name {String} 路由名称
* @param component | components {Object | Array先来看一个简单的例子：
// 根路径 / 页面
router test
// components
const Index = {
template: `
Index {{ $route.params.id }}
path
上面代码中的 routes 就配置好了一个名字为 “index” 的路由，它挂载在根目录 “/” 下，当进入路径“/”时，将会在页面上渲染出 “Index” 组件。需要注意的是，以 “/” 开头表示根路径，而 children 中的 path 则不应以 “/” 开头
在上面代码中，通过冒号声明了一个参数 id ，之后我们就可以在组建中通过 $route.params.id 访问到这个参数
在 path 属性中，可以使用通配符 * 来覆盖所有的页面情况，当访问的路径并不在我们预设好的路径中时，用户就会看到 404 页面
component
需要渲染的组件只会在当前页面的
components
如果一个路径有多个组件该怎么配置组件参数呢？首先，将 component 替换为 components
// other components
const User = {
template: ' User '
}
const Type = {
template: ' Type '
}
// routes 的 components 参数
components: {
default: Index,
user: User,
type: Type
}
// 在页面中使用
redirect
有时候我们需要访问 Index 页面，但是用户还没有登录，需要先去 login 页面登录，这时就需要用到重定向 redirect 参数
redirect 可以传入三种类型的值
- 字符串：需要重定向到的路由路径
- 对象：需要重定向到的路由名称 {name: 'login', param: {test: 123}} ，可以通过配置 param 配置路由参数，也可省略
- 方法：接收当前的路由 path 作为参数，需要返回一个 path 字符串作为重定向到的路径
传入字符串和对象的话，写法方便，但是却不利于根据条件做判断的情况；而通过传入一个方法可以实现根据实际情况重定向页面
alias
与重定向有点类似的是 alias 别名参数。但是重定向是将当前路由指向到另一个路由，并渲染那个路由的组件；而别名则是给当前的路由重新取了一个名字，使当前路由不管是访问哪个路径都能够进入相同的页面
以上面的例子看，不管是访问 / 还是 /index 都能看到相同的页面
children
children 参数适合用于页面的嵌套。比如某个页面上有导航栏、侧边栏和中间的主体内容，我们需要根据路径改变主体内容，而不需要改变导航栏和侧边栏，这时候通过 children 就可以将子组件 subview 渲染到父组件 Index 的
页面间的切换与回退
页面的切换有两种，一种是向history中添加一条新纪录，如果点击返回会回到之前的页面；另一种是替换当前页面，无法通过返回回到当前页面
添加新纪录
// 字符串
router.push('otherPage') // 传入路径
// 对象
router.push({path: 'otherPage', query: {test: 123}}) // 传入路径，最终结果是 /otherPage?test=123， query 可不传
router.push({name: 'other', param: {test: 123}}) // 传入路由名，param 可不传
我们也可以在页面中使用
替换当前页面
// 参数与 router.push() 相同
router.replace()
页面的前进与后退
与 window.history.go(n) 相似，可以使用 router.go(n) 来控制页面的前进与后退