详解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>

文章知识点与官方知识档案匹配,可进一步学习相关知识


目录
相关文章
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
141 1
|
3天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
51 12
|
20天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
48 8
|
21天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
59 1
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
3月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
3月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
69 18
|
3月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
3月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
3月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
52 1

热门文章

最新文章