Vue路由跳转传值方法

最新推荐文章于 2024-07-27 11:33:23 发布

三千花落

最新推荐文章于 2024-07-27 11:33:23 发布

阅读量624

点赞数

分类专栏：代码文章标签： html vue

本文链接：https://blog.csdn.net/qq_42197262/article/details/108004065

版权

6 篇文章 0 订阅

订阅专栏

传值:

<router-link :to="{name:'跳转的路由名称',params:{数值名1:'值内容1',数值名1:'值内容1'}}"

取值:

$route.params.数值名1

路由:

{
    path: '/',
    name: '跳转的路由名称',
    component: () => import('路由路径')
},

这个方法传值不会显示在地址栏中

传值:

<router-link :to="{path:'/跳转的路由',query:{数值名1:'值内容1',数值名1:'值内容1'}}"

取值:

$route.query.数值名1

路由:

{
    path: '/跳转的路由',
    component: () => import('路由路径')
},

这个方法传值会显示在地址栏中

传值:

<router-link to="/路由地址/参数1/参数2"

取值:

$route.params.数值名1
$route.params.数值名2

路由:

{
    path: '/跳转的路由/:数值名1/:数值名2',
    component: () => import('路由路径')
},

这个方法传值也会显示在地址栏中

三千花落

关注

专栏目录