【vue】--vueRouter

动态路由匹配

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})
当匹配到一个路由时，参数值会被设置到 this.$route.params

响应路由参数的变化

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

 beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()

 　　// 在当前路由改变，但是该组件被复用时调用 (动态路由)
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`

  }

捕获所有路由或 404 Not found 路由

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分

编程式的导航

router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则也适用于 router-link 组件的 to 属性。

注意： 如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

命名视图

如果 router-view 没有设置名字，那么默认为 default

  <router-link to="/">/</router-link>
  <router-link to="/other">/other</router-link>

<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 配置 (带上 s)：

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

重定向和别名

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})
重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})
甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})
注意导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。在下面这个例子中，为 /a 路由添加一个 beforeEach 或 beforeLeave 守卫并不会有任何效果。

别名

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

 路由传参

一、直接在path 上传参   基本和 params传参一样

      goSearch(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/search/${id}`,
        })
　　对应路由配置：

   {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }
　　在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

　  this.$route.params.id

二、params传参   注意 params传参必须用name来引入路由

 this.$router.push({
          name: 'Search',
          params: {
            id: id
          }
        })
　　对应路由配置: 这里可以添加:/id 也可以不添加，不添加数据会在url后面显示，不添加数据就不会显示

   {
     path: '/search/：id',   需要加上   /:id    否则刷新页面后，参数丢失
     name: 'Search',
     component: Search
   }
获取参数:

this.$route.params.id

三、query传参 （参数显示在 url） 由path 引入路由

 this.$router.push({
          path: '/search',
          query: {
            id: id
          }
        })
对应路由配置：

   {
     path: '/search',
     name: 'Search',
     component: Search
   }
获取参数:
this.$route.query.id