定义vue-router的动态路由以及如何获取传过来的动态参数

简介: 定义vue-router的动态路由以及如何获取传过来的动态参数

动态路由是指在vue-router中,可以通过一种特殊的语法来定义一个动态的路由路径,该路径的一部分可以根据实际情况进行动态更改。如下所示:

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: UserDetail
    }
  ]
})

上述代码中的:id就是一个动态路由参数,它表示路径中的一部分可以根据实际情况进行变化。

在组件中可以通过$route.params来获取传过来的动态参数。在上述例子中,可以通过$route.params.id来获取传过来的id参数。

下面是一个获取传递动态参数的例子:

<template>
  <div>
    <h2>User Detail</h2>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$route.params.id);
  }
}
</script>

在这个例子中,当访问/user/123时,id参数的值是123,可以通过$route.params.id获取到该值。在mounted钩子函数中,也可以通过this.$route.params.id来获取该值。

目录
相关文章
|
6月前
|
网络架构
vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为
vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为
|
1月前
|
缓存 JavaScript 前端开发
vue-router学习二:动态路由(路由传递数据的一种方式),路由懒加载,嵌套路由,路由传递参数方式,导航守卫,keep-alive标签
这篇文章主要介绍了Vue Router的高级用法,包括动态路由、路由懒加载、嵌套路由、路由参数传递、导航守卫以及keep-alive的使用。
29 0
vue-router学习二:动态路由(路由传递数据的一种方式),路由懒加载,嵌套路由,路由传递参数方式,导航守卫,keep-alive标签
|
1月前
|
移动开发 前端开发 JavaScript
vue-router学习一:什么是路由,路由分类,路由安装,路由使用,路由默认路径,history模式,默认的linkActiveClass属性,路由代码跳转
这篇文章是关于Vue.js官方路由管理器vue-router的详细介绍,包括路由的基本概念、分类、安装、使用以及在单页面应用中的路由模式和跳转方法。
87 0
vue-router学习一:什么是路由,路由分类,路由安装,路由使用,路由默认路径,history模式,默认的linkActiveClass属性,路由代码跳转
|
1月前
|
缓存 移动开发 JavaScript
《vue2进阶篇:路由》第10章:vue-router,包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件
《vue2进阶篇:路由》第10章:vue-router,包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件
42 2
|
2月前
|
JavaScript 网络架构
路由传参及跳转方式
路由传参及跳转方式
|
3月前
|
JavaScript 前端开发
Vue中传递自定义参数到后端、后端获取数据(使用Map接收参数)
这篇文章讲述了如何在Vue中通过Axios二次封装传递自定义参数到后端,并展示了后端如何使用Map接收这些参数,以及如何避免参数转换错误和统一接口设计的方法。
|
4月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
236 1
|
6月前
|
网络架构
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
|
6月前
|
JavaScript 前端开发 网络架构
Vue-router的动态路由:获取传递的值
Vue-router的动态路由:获取传递的值
|
6月前
|
小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
66 0