详解vue路由——动态路由
在 Vue 中,使用动态路由可以使我们根据不同的参数渲染出不同的内容。动态路由可以实现类似于详情页、搜索页等常见的页面类型。首先我们需要在路由配置文件中定义动态路由。定义方式是在路由路径中加入参数,如。时,组件不会重新渲染,而是复用之前的组件实例,并更新。是参数名,表示这个路由路径可以匹配任何路径,例如。来获取动态路由中传递的参数。因此在组件中,如果需要根据。的变化来更新页面内容,需要在。然后在组
·
在 Vue 中,使用动态路由可以使我们根据不同的参数渲染出不同的内容。动态路由可以实现类似于详情页、搜索页等常见的页面类型。
首先我们需要在路由配置文件中定义动态路由。定义方式是在路由路径中加入参数,如 /:id
,其中 id
是参数名,表示这个路由路径可以匹配任何路径,例如 /123
、/456
等等。
const routes = [
{
path: '/:id',
component: () => import('@/views/Detail.vue')
}
]
然后在组件中,我们可以通过 $route.params
来获取动态路由中传递的参数。例如,如果路由为 /123
,我们可以通过 $route.params.id
获取到参数值 123
。
<template>
<div>
<p>详情页,ID为:{{ $route.params.id }}</p>
</div>
</template>
需要注意的是,当路由从 /123
跳转到 /456
时,组件不会重新渲染,而是复用之前的组件实例,并更新 $route
对象。因此在组件中,如果需要根据 $route.params
的变化来更新页面内容,需要在 watch
中监听 $route
对象的变化。
<template>
<div>
<p>详情页,ID为:{{ id }}</p>
</div>
</template>
<script>
export default {
data() {
return {
id: ''
}
},
watch: {
'$route.params': {
handler() {
// $route.params 发生变化时,更新 id
this.id = this.$route.params.id
},
immediate: true // 组件加载时也执行一次
}
}
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)