Vue 中 $router 和 $route 的区别

发表时间： | 阅读次数:

在前端开发中，我们一直和Vue开发打交道，我们有时会运用 $router ，有时会运用 $route 你能说出其中缘由吗？

什么是$route

  • route 它是一条路由信息

    1
    2
    3
    4
    5
    6
    7
    8
    {
      name: 'scroll_index',
      path: 'scroll_behavior',
      component: () => import('@/pages/ScrollBehavior'),
      meta: {
        keepAlive: true
      }
    }

  • route 是一个局部的对象，可以获取当前对应的路由信息，比如path，query，params，meta，name等信息。
    route

什么是$router

  • router 它是一组路由

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    let routeLists = [
      {
        path: '/',
        component: () => import('@/App'),
        children: [
          {
            name: 'scroll_index',
            path: 'scroll_behavior',
            component: () => import('@/pages/ScrollBehavior'),
            meta: {
              keepAlive: true
            }
          },
          {
            name: 'scroll_catalogue',
            path: 'scroll_behavior1',
            component: () => import('@/pages/TestScrollBehavior')
          },
          {
            name: 'scroll_detail',
            path: 'scroll_behavior2',
            component: () => import('@/pages/TestScrollBehavior1')
          }
        ]
      }
    ]

  • Router 可以理解为一个容器，容器里面包含了所有的 Route，也就是说 Router 是所有 Route的集合，也管理了所有的Route。
    router

  • 我们可以运用Router来实现页面的跳转以及参数传递。
1
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
1
this.$router.push({ name: 'user', params: { userId: 123 }})