Vue router 传参

最新推荐文章于 2025-04-12 21:55:44 发布

绪锋

最新推荐文章于 2025-04-12 21:55:44 发布

阅读量270

点赞数

分类专栏： Vue 文章标签： Vue 传参

本文链接：https://blog.youkuaiyun.com/sinat_34531165/article/details/83099160

版权

11 篇文章

订阅专栏

本文深入讲解了三种Vue路由传参方式：通过路由name、to属性和URL路径传参。介绍了如何在路由配置中设置参数，并在组件中获取这些参数，包括使用$route.params对象访问传入的参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.通过路由的name传参

路由配置中填写name参数

{
    path:'/hi/hi1',
    name: '由Name传值：我是Hi1',
    component: Hi1
}

然后在页面中可以使用 $route.params.userName 进行调用

<div>{{$route.params.userName}}</div>

2.to传参

在路由配置中填写name参数

{
    path:'/hi/hi2',
    name: 'hi2',
    component: Hi2
}

然后在页面中使用router-link中用to传参

<router-link :to="{name:'hi2',params:{userName:'我是to传值'}}" >hi页面 2</router-link>

然后在页面中调用

 <div>{{$route.params.userName}}</div>

3.通过URL传参

在路由页面配置path 地址时，添加参数

{
    path:'/news/:newsID/:newsTit',
    name:'News',
    component:News
}

添加参数的形式是“ /:参数名称 ”

然后在router-link to 中填参数

<router-link to="/news/163/新闻大爆炸">新闻页面</router-link>

最后在页面用 $route.params.参数名称进行调用

<div>新闻编号是：{{$route.params.newsID}}</div>
<div>新闻标题是：{{$route.params.newsTit}}</div>

注意，如果要参数传递时有个基本的类型判断，在路由配置地址时，在参数名称后面加上（正则表达式）即可。

例如只允许传递数字ID：

{
  path:'/news/:newsID(\\d+)/:newsTit',
  name:'News',
  component:News
}