[JavaScript知识库]vue-router

1.安装使用

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
或者
npm install vue-router

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

我们可以在任何组件内通过?this.$router?访问路由器，也可以通过?this.$route?访问当前路由

[this.$router?和?router?使用起来完全一样。我们使用?this.$router?的原因是我们并不想在每个独立需要封装路由的组件中都导入路由]

2.动态路由匹配

  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]

3.响应路由参数的变化?

复用组件时，对路由参数的变化作出响应的方法：

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

2.命名路由?

1.通过一个名称来标识一个路由显得更方便一些

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

这两种方式都会把路由导航到 /user/123 路径

1.<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

2.router.push({ name: 'user', params: { userId: 123 } })

?2.默认视图（同时 (同级) 展示多个视图，如果?router-view?没有设置名字，那么默认为?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>

components：cccccc?

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

?3.嵌套命名视图

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

3.路由组件传参

使用?props?将组件和路由解耦：

取代与?$route?的耦合：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})

?通过?props?解耦：

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

4.全局前置守卫

使用?router.beforeEach?注册一个全局前置守卫：

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

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

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标?路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来?resolve?这个钩子。执行效果依赖?next?方法的调用参数。

  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是?confirmed?(确认的)。

  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到?from?路由对应的地址。

  • next('/')?或者?next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向?next?传递任意位置对象，且允许设置诸如?replace: true、name: 'home'?之类的选项以及任何用在?router-link?的?to?prop?或?router.push?中的选项。

  • next(error): (2.4.0+) 如果传入?next?的参数是一个?Error?实例，则导航会被终止且该错误会被传递给?router.onError()?注册过的回调。

?完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用?beforeRouteLeave?守卫。
3. 调用全局的?beforeEach?守卫。
4. 在重用的组件里调用?beforeRouteUpdate?守卫 (2.2+)。
5. 在路由配置里调用?beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用?beforeRouteEnter。
8. 调用全局的?beforeResolve?守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的?afterEach?钩子。
11. 触发 DOM 更新。
12. 调用?beforeRouteEnter?守卫中传给?next?的回调函数，创建好的组件实例会作为回调函数的参数传入。