vue 动态路由

什么是动态路由?

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

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

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

动态路由的使用:

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

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

和普通路由的使用没什么区别,一样通过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接收的参数,但是它毕竟是路径的一部分。

posted @ 2019-03-13 16:21  Heson  阅读(417)  评论(0编辑  收藏  举报
Live2D