Vue-Router

router-link匹配成功将自动添加class .router-link-active

vue-router

获取动态路由传值在this.$route.params
query传值在this.$route.query获取
编程式导航路由
- this.$router.push({path:’/’})
- 命名路由，配置路由的时候添加name，跳转时使用this.$router.push({name:’’})
- 默认为hash，如果要改为history，在实例化VueRouter的时候添加mode:‘history’
- 在编程式导航中如果提供了path，params会失效，可以使用命名路由或者写完整的path
- this.$router.replace进行替换
- this.$router.go
嵌套路由
- 在配置路由时添加children为一个数组，然后继续配置路由即可
当路由从/user/foo导航到/user/bar，组件会被复用，意味着组件生命钩子函数不会被调用，可以监听$route变化，也可以使用beforeRouteUpdate导航守卫

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

同一路径匹配多个路由时，谁先匹配谁优先级高（与React-router中Switch相同）
使用通配符匹配时，$route.params会添加pathMatch为匹配的值
有时需要多个视图，而不是单独一个出口，那么可以为视图添加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
      }
    }
  ]
})

嵌套命名视图（忽略了嵌套路由）

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

重定向可以为路径、命名路由，甚至可以为一个方法

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

可以通过alias指定别名（当访问/b时与访问/a一样）

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

路由组件传参，设置路由props进行传参，如果是命名视图，那么就要为每个视图添加props属性（在组件中需要接收）
1. 布尔模式，params会作为属性传入
2. 对象模式，按原样作为组件属性
3. 函数模式，接收route返回数据

vue-router进阶

全局前置守卫

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

router.beforeEach((to, from, next) => {
  // ...
})

在跳转前触发，一定要调用next方法，next(false)中断当前导航，next(’/’)或者next({path:’/’})等，当前导航被中断，进行新的导航，next(error)传入是一个Error实例，导航被终止，错误会被传递给route.onError()注册过的回调

全局解析守卫

使用router.beforeResolve注册，与beforeEach类似，在导航确认前（执行完这个守卫导航被确认），在所有组件内守卫和异步路由组件被解析之后

全局后置钩子

使用router.afterEach()全局创建，不接受next改变导航本身

也可以直接在路由配置上直接定义beforeEnter守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内守卫

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

导航解析过程

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

路由可以添加meta字段，作为路由元信息（登录验证可以用这个做）
路由过渡使用transition组件即可
获取数据可以在created生命周期或者beforeRouteEnter钩子
Router实例可以添加scrollBehavior定义滚动行为，返回你想到达的滚动位置，也可以返回一个Promise达到异步滚动的目的
路由懒加载

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

有时需要将某个路由下的所有组件打包在同一个异步块，可以使用一个特殊的注释语法标注

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

UI框架（Github搜）

element-ui 基于Vue PC端的UI框架
mintUi 基于移动端的UI框架

有些不懂的，在github上看demo

组件可以按需引入（减少体积），如果用的多就没必要了

how2js

发布了85 篇原创文章 · 获赞 62 · 访问量 2万+

私信关注

Vue-Router（笔记）

Vue-Router

vue-router

vue-router进阶

UI框架（Github搜）

猜你喜欢