Router3 API 参考

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果：<a href="home">Home</a> -->

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="'home'">Home</router-link>

<!-- 对象形式 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

<!-- 这个链接只会在地址为 / 的时候被激活 -->
<router-link to="/" exact></router-link>

<router-link to="/about" custom v-slot="{ href, route, navigate, isActive, isExactActive }">
  <NavLink :active="isActive" :href="href" @click="navigate">{{ route.fullPath }}</NavLink>
</router-link>

<router-link
  to="/foo"
  v-slot="{ href, route, navigate, isActive, isExactActive }"
  custom
>
  <li :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

const router = new VueRouter({
  routes: [
    // 下面的对象就是路由记录
    {
      path: '/foo',
      component: Foo,
      children: [
        // 这也是个路由记录
        { path: 'bar', component: Bar }
      ]
    }
  ]
})

declare type RouteConfig = {
  path: string,
  component?: Component,
  name?: string,                // 命名路由
  components?: { [name: string]: Component }, // 命名视图组件
  redirect?: string | Location | Function,
  props?: boolean | Object | Function,
  alias?: string | Array<string>,
  children?: Array<RouteConfig>, // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void,
  meta?: any,

  // 2.6.0+
  caseSensitive?: boolean,       // 匹配规则是否大小写敏感，默认 false
  pathToRegexpOptions?: Object   // 编译正则的选项
}

type PositionDescriptor = { x: number, y: number } | { selector: string } | void

type scrollBehaviorHandler = (
  to: Route,
  from: Route,
  savedPosition?: { x: number, y: number }
) => PositionDescriptor | Promise<PositionDescriptor>

import VueRouter from 'vue-router'

const router = new VueRouter({
  // ...
})

router.beforeEach((to, from) => {
  if (from === VueRouter.START_LOCATION) {
    // 初始导航
  }
})

router.beforeEach((to, from, next) => {
  /* 必须调用 `next` */
})

router.beforeResolve((to, from, next) => {
  /* 必须调用 `next` */
})

router.afterEach((to, from) => {})

router.push(location, onComplete?, onAbort?)
router.push(location).then(onComplete).catch(onAbort)
router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
router.go(n)
router.back()
router.forward()

const matchedComponents: Array<Component> = router.getMatchedComponents(location?)

const resolved: {
  location: Location;
  route: Route;
  href: string;
} = router.resolve(location, current?, append?)

// 添加一条新路由规则。若 name 已存在则覆盖
addRoute(route: RouteConfig): () => void

// 添加一条新路由作为现有路由的子路由
addRoute(parentName: string, route: RouteConfig): () => void

// 获取所有活跃的路由记录列表
getRoutes(): RouteRecord[]

router.onReady(callback, [errorCallback])

router.onError(callback)

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/' },
    // 参数用冒号表示
    { path: '/params/:foo/:bar' },
    // 参数后加 ? 表示可选
    { path: '/optional-params/:foo?' },
    // 参数后可跟正则，只有 id 全为数字时才匹配
    { path: '/params-with-regex/:id(\\d+)' },
    // 星号匹配任意内容
    { path: '/asterisk/*' },
    // 用括号包裹并加 ? 使部分路径可选
    { path: '/optional-group/(foo/)?bar' }
  ]
})

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'

// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到的位置
  }
})

// 所有路由导航都滚动到顶部
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

// 模拟浏览器原生的前进/后退表现
scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  }
  return { x: 0, y: 0 }
}

// 模拟"滚动到锚点"
scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return { selector: to.hash }
  }
}

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash,
      behavior: 'smooth',
    }
  }
}

const Foo = () => import('./Foo.vue')

const router = new VueRouter({
  routes: [{ path: '/foo', component: Foo }]
})

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

import VueRouter from 'vue-router'
const { isNavigationFailure, NavigationFailureType } = VueRouter

router.push('/admin').catch(failure => {
  if (isNavigationFailure(failure, NavigationFailureType.redirected)) {
    showToast('Login in order to access the admin panel')
  }
})

router.push('/admin').catch(failure => {
  if (isNavigationFailure(failure, NavigationFailureType.redirected)) {
    failure.to.path   // '/admin'
    failure.from.path // '/'
  }
})