定义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来获取该值。

目录
相关文章
|
4天前
|
网络架构
vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为
vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为
|
4天前
|
JavaScript 前端开发 网络架构
Vue-router的动态路由:获取传递的值
Vue-router的动态路由:获取传递的值
|
4天前
|
网络架构
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
|
4天前
|
小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
18 0
|
4天前
|
前端开发
子路由的配置方法
子路由的配置方法
10 0
|
4天前
|
JavaScript
Vue中如何获取当前路由的参数?
Vue中如何获取当前路由的参数?
62 1
|
4天前
|
负载均衡 JavaScript 网络协议
route和router的区别,怎么定义vue-router的动态路由?怎么获取传过来的值
route和router的区别,怎么定义vue-router的动态路由?怎么获取传过来的值
64 1
|
5月前
|
JavaScript 网络架构
Vue 路由器传参和取值 路径参数
Vue 路由器传参和取值 路径参数
|
6月前
easyUI 动态参数名称和动态参数值
easyUI 动态参数名称和动态参数值
|
9月前
|
JavaScript 网络架构
vue 动态路由component 传递变量报错问题解决
vue 动态路由component 传递变量报错问题解决
101 0