想要使用 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<Object>} 该路径下的组件对象
* @param redirect {Sring | Object | Function} 当前路径重定向到的路径
* @param alias {String} 当前路径的别名
* @param children {Array<Object>} 当前路由下的子路由数组，每个 item 都具有上面的这些属性
*/
先来看一个简单的例子：
// 根路径 / 页面
<div id="app">
<h1>router test<h1>
<router-view></router-view>
</div>
// components
const Index = {
template: `
<div>
<h2> Index {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
const Subview = {
template: '<div> Subview </div>'
}
const routes = [{
path: '/:id',
name: 'index',
alias: '/index/:id',
redirect: to => {
if (!isLogin) return '/login'
return to
},
component: Index,
children: [{
path: 'subview',
name: 'subview',
component: Subview
}]
}]
path
上面代码中的 routes 就配置好了一个名字为 “index” 的路由，它挂载在根目录 “/” 下，当进入路径“/”时，将会在页面上渲染出 “Index” 组件。需要注意的是，以 “/” 开头表示根路径，而 children 中的 path 则不应以 “/” 开头
在上面代码中，通过冒号声明了一个参数 id ，之后我们就可以在组建中通过 $route.params.id 访问到这个参数
在 path 属性中，可以使用通配符 * 来覆盖所有的页面情况，当访问的路径并不在我们预设好的路径中时，用户就会看到 404 页面
component
需要渲染的组件只会在当前页面的 <router-view></router-view> 标签中进行渲染，该标签有一个name属性，当路径下需要渲染多个组件时，就会使用到这个属性。如果不指明该属性，将会渲染默认的组件（即上面代码中 component 属性指定的组件）
components
如果一个路径有多个组件该怎么配置组件参数呢？首先，将 component 替换为 components
// other components
const User = {
template: '<div> User </div>'
}
const Type = {
template: '<div> Type </div>'
}
// routes 的 components 参数
components: {
default: Index,
user: User,
type: Type
}
// 在页面中使用
<router-view></router-view> // 渲染默认组件 Index
<router-view name="user"></router-view> // 渲染组件 User
<router-view name="type"></router-view> // 渲染组件 Type
redirect
有时候我们需要访问 Index 页面，但是用户还没有登录，需要先去 login 页面登录，这时就需要用到重定向 redirect 参数
redirect 可以传入三种类型的值
- 字符串：需要重定向到的路由路径
- 对象：需要重定向到的路由名称
{name: 'login', param: {test: 123}}，可以通过配置param配置路由参数，也可省略 - 方法：接收当前的路由 path 作为参数，需要返回一个 path 字符串作为重定向到的路径
传入字符串和对象的话，写法方便，但是却不利于根据条件做判断的情况；而通过传入一个方法可以实现根据实际情况重定向页面
alias
与重定向有点类似的是 alias 别名参数。但是重定向是将当前路由指向到另一个路由，并渲染那个路由的组件；而别名则是给当前的路由重新取了一个名字，使当前路由不管是访问哪个路径都能够进入相同的页面
以上面的例子看，不管是访问 / 还是 /index 都能看到相同的页面
children
children 参数适合用于页面的嵌套。比如某个页面上有导航栏、侧边栏和中间的主体内容，我们需要根据路径改变主体内容，而不需要改变导航栏和侧边栏，这时候通过 children 就可以将子组件 subview 渲染到父组件 Index 的 <router-view></router-view> 标签中
页面间的切换与回退
页面的切换有两种，一种是向history中添加一条新纪录，如果点击返回会回到之前的页面；另一种是替换当前页面，无法通过返回回到当前页面
添加新纪录
// 字符串
router.push('otherPage') // 传入路径
// 对象
router.push({path: 'otherPage', query: {test: 123}}) // 传入路径，最终结果是 /otherPage?test=123， query 可不传
router.push({name: 'other', param: {test: 123}}) // 传入路由名，param 可不传
我们也可以在页面中使用 <router-link :to="..."> 来实现页面的跳转，它将会被渲染成一个 a 标签，属性to中的数据格式与router.push()方法的参数相同
替换当前页面
// 参数与 router.push() 相同
router.replace()
<router-link :to="..." replace>
页面的前进与后退
与 window.history.go(n) 相似，可以使用 router.go(n) 来控制页面的前进与后退
本文参考 Vue Router 官方文档，并在整理后发布。下周将会继续 Vue Router 的高级使用方式
扫码关注前端周记公众号
网友评论