tabliu

大踏步走

Vue 学习笔记(5) - 理解vue-router中的router、routes和$route

Vue.js + Vue Router创建单页应用,是非常简单的。在使用Vue Router过程中,我们经常会遇到routerroutes$route这些名称,对于初学者来讲很容易混淆,接下来,通过官方文档和实例一起学习下。

vue-router的安装

可以通过引用或者npm下载的方式来安装

// 引入cdn地址
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

// 通过npm安装
npm install vue-router

安装后需要引入和使用:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

vue-router的使用

基本路由

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1>Hello, vue-router!</h1>
  <div class="router">
    <router-link to="/foo">Foo</router-link>
    <router-link to="/bar">Bar</router-link>
  </div>
  <router-view></router-view>
</div>

<script>
  // 定义或导入路由组件
  const Foo = { template: `<div class="foo">Foo</div>` }
  const Bar = { template: `<div class="bar">Bar</div>` }

  // 定义路由
  const routes = [
    {
      path: '/foo',
      component: Foo
    },
    {
      path: '/Bar',
      component: Bar
    }
  ]

  // 定义路由器,创建`router`实例,传`routes`配置
  const router = new VueRouter({
    routes: routes
  })

  // 创建跟实例并挂载路由器,通过`router`装载路由器
  const app = new Vue({
    router,
  }).$mount('#app')
</script>

动态路由

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1>Hello, vue-router!</h1>
  <div class="router">
    <router-link to="/user/lilei" exact>lilei</router-link>
    <router-link to="/user/lucii">lucii</router-link>
  </div>
  <router-view></router-view>
</div>

<script>
  // 定义或导入路由组件
  const User = { template: `<div class="user">{{ $route.params.username }}</div>` }

  // 定义路由
  const routes = [
    {
      path: '/user/:username',
      component: User
    },
    // 'router-link-active': 'active'
  ]

  // 定义路由器,创建`router`实例,然后传`routes`配置
  const router = new VueRouter({
    routes: routes
  })

  // 创建跟实例并挂载路由器,通过`router`装载路由器
  const app = new Vue({
    router,
  }).$mount('#app')
</script>

vue-router中的几个概念

router

routerVueRouter的实例。其本质是Vue实例下的一个对象属性,通过挂载在Vue使创建的路由在Vue使用。

常用router定义:

const router = new VueRouter({
  mode: <String>, // 配置路由模式,可选值:"hash" | "history" | "abstract",默认值:"hash" (浏览器环境) | "abstract" (Node.js 环境)
  base: <String>, // 应用的基路径,默认值: "/"
  routes: <Array>, // 路由定义
  linkActiveClass: <String>, // 全局配置 <router-link> 的默认“激活`class`类名”,默认值: "router-link-active"
  linkExactActiveClass: <String>, // 全局配置 <router-link> 精确激活的默认的`class`,默认值: "router-link-exact-active"
  scrollBehavior: <Function>, // 设置路由跳转的滚动行为
  ...
})

$route

$route是单个的路由对象,表示当前激活的路由的状态信息,包含了当前URL解析得到的信息,还有URL匹配到的路由记录(route records)。

路由对象是不可变 (immutable) 的,每次成功的导航后都会产生一个新的对象。

路由对象出现在多个地方:

  • 在组件内,即this.$route;

  • $route观察者回调内

  • router.match(location)的返回值

  • 导航守卫的参数:

router.beforeEach((to, from, next) => {
  // `to` 和 `from` 都是路由对象
})
  • scrollBehavior方法的参数:
const router = new VueRouter({
  scrollBehavior (to, from, savedPosition) {
    // `to` 和 `from` 都是路由对象
  }
})

$route包含的属性:

$route = {
  path: <String>, // 对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"
  params: <Object>, // 一个`key/value`对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象
  query: <Object>, // 一个`key/value`对象,表示`URL`查询参数
  hash: <String>, // 当前路由的`hash 值 (带 #)`,如果没有`hash`值,则为空字符串
  fullPath: <String>, // 完成解析后的`URL`,包含查询参数和`hash`的完整路径
  matched: <Array>, // 包含当前路由的所有嵌套路径片段的路由记录
  name: <String>, // 当前路由的名称,如果有的话
  redirectedFrom: <String>, // 如果存在重定向,即为重定向来源的路由的名字。
}

参考文档