vue踩坑笔记05---动态路由

什么是动态路由？

官方说明如下。
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。

举个例子。
一个画廊有十万幅画，这是些画存放在不同的窗口，每一幅画在展示的时候，都要使用唯一的一个画框，也就是说，在展示画的时候，画框是不变的，唯一改变的只是窗口和被展示的画。

个人总结一下，一个组件根据触发条件的不同，要在多个路由中匹配一个，这种情况就是动态路由。

动态路由的使用：

export default new Router({
  routes: [{
    path: '/fruit/:id',
    name: 'fruit',
    component: fruit
  }]
})

要使用动态路由，首先要配置路由路径，在路由的路径上加上/:变量，此时fruit这个组件，就会被当作唯一的一个共用模板。

和普通路由的使用没什么区别，一样通过router-link跳转。

<router-link :to="{path:'/fruit/apple'}">apple</router-link>

动态路由的区别：

但是在传参上还是有些区别的。

<router-link :to="{path:'/fruit/banana',query:{id:'香蕉'}}">banana</router-link>

此时的地址栏。

http://localhost:8082/#/fruit/banana?id=香蕉

上述例子，是一个正常的query传参跳转，参数也只能使用this.$route.query接收。

如果上述例子是一个动态路由，那就不一样了。

this.$route.query.id
// 接收到的值为：香蕉

this.$route.params.id
// 接收到的值为：banana

此时我们发现，params也能接收到参数，他接收的正是动态路由配置的变量。
也就是，我在配置动态路由的时候，在路径上加上的/:id。

既然这个变量，是用params接收的，那么刷新会消失吗？
当然不会消失，虽然它是params接收的参数，但是它毕竟是路径的一部分。

---

个人学习总结，欢迎批评指正