Vue 路由 Vue-Router

2019-08-08  本文已影响0人  李霖弢

路由

注入实例
const router = new VueRouter({
  routes : [
    { path: '/user', name: 'user' , component:  { template: '<div>User</div>' },
    { path: '/user/:id', 
       component: { template: '<div>{{ $route.params.id }}</div>' }
    }
  ]
})
new Vue({
  router
}).$mount('#app')

此后可以在任何组件内通过 this.$router 访问路由器(或通过import导入router实例来访问)，通过 this.$route 访问当前路由(包括query,hash等)

路由参数

通过:标记路由参数，组件内可通过$route.params访问该参数。
使用props可以将组件和路由解耦，使组件不再只能在特定URL下使用。

嵌套路由

如下，当 /main 匹配成功，Main会被渲染，同时 MainDefault 会被渲染在 Main 的<router-view> 中。当/main/dashboard 匹配成功，Dashboard 会被渲染在 Main 的<router-view> 中

{
  path: '/main',
  name: 'main',
  component: Main,
  children: [
    { path: '', component: MainDefault },
    {
      path: 'dashboard',
      component: Dashboard
    }
  ]
}
捕获所有路由或404路由

通过通配符 * 可匹配所有路径，如需匹配404则应将该路由配置在最后(先配置的路由匹配优先级更高)

{
  path: '*'
}
hostory模式

利用了history.pushState API，使URL中将不再具有#。但需服务器端做好对应配置。

const router = new VueRouter({
  mode: 'history',//默认为hash
  routes: [...]
})
重定向

导航守卫只会对重定向之后的路由生效

  routes: [
    { path: '/a', redirect: '/bar' },
    { path: '/b', redirect: { name: 'foo' }}
  ]
别名

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

{ path: '/a', component: A, alias: '/b' }

导航和出口

<router-link> 默认会被渲染成一个 <a> 标签，将匹配到的组件渲染在路由出口<router-view>
以 / 开头的嵌套路径会被当作根路径

<router-link to="/foo">Go to Foo</router-link>
<router-view></router-view>
编程式的导航
  1. router.push(location, onComplete?, onAbort?)
    location可以为对象或字符串。注意当对象使用path时，params会被忽略。
    同样的规则也适用于 router-link 组件的 to 属性。
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

onComplete和onAbort回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用

  1. router.replace(location, onComplete?, onAbort?)
    不会向 history 添加新记录
  2. router.go(n)
    传入-1时即为后退
命名出口

同一层级下存在多个视图，可通过name区分，默认为default

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

导航守卫

触发条件

路由参数(如:id)或查询(query)的改变会复用组件，并不会触发进入/离开的导航守卫，也不会销毁/创建目标组件。因此组件的生命周期也不会触发。此时可以通过以下方式相应路由参数变化:

  1. watch $route 对象
  2. 组件内导航守卫beforeRouteUpdate (to, from, next) {}
触发顺序

导航被触发。
在失活的组件里调用离开守卫。beforeRouteLeave
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

全局前置守卫 router.beforeEach
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数：

全局解析守卫 router.beforeResolve

和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局后置钩子 afterEach

不会接受 next 函数也不会改变导航本身

router.afterEach((to, from) => {
  // ...
})
路由独享的守卫 beforeEnter
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
组件内守卫
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`,因为当守卫执行前，组件实例还没被创建
    next(vm => {
      // 但是可以通过回调中的 `vm` 访问组件实例
    })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

路由元信息 meta

可用于存储该路由的一些自定义信息，如权限检测、是否需要登录等。
一个路由匹配到的所有路由记录(包括所有祖先)会暴露为 $route.matched 数组。我们可以遍历 $route.matched 来检查路由记录中的 meta 字段。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

滚动行为

查看文档

换到新路由时，想要页面滚到指定位置，或者是保持原先的滚动位置，或滚动到目标锚点。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    // `savedPosition` 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
  }
})

路由懒加载

把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应组件

Webpack自动分割
const Foo = () => import('./Foo.vue')

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})
把组件按组分块

通过命名chunk，一个特殊的注释语法，Webpack 会将相同块名称的异步模块组合到相同的异步块中。

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

猜你喜欢

热点阅读