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<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 可以传入三种类型的值

1. 字符串：需要重定向到的路由路径
2. 对象：需要重定向到的路由名称 {name: 'login', param: {test: 123}} ，可以通过配置 param 配置路由参数，也可省略
3. 方法：接收当前的路由 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) 来控制页面的前进与后退