Vue基础知识:声明式导航——跳转传参,声明式导航有哪几种路由传值方式,查询参数传参语法,动态路由传参语法,两者的区别

在跳转路由时,进行传值

1.查询参数传参

        1.语法格式如下:

        to="/path?参数名=值"

        2.对应页面组件接收传递过来的值

        $route.query.参数名

案例演示:

 

此时点击“跳转并携带参数”这个链接,就会跳转到search这个页面并携带参数key,它的值为"哈哈哈",

 

在search页面中就可以通过$route.query.键名拿到传过来的值

 

 页面效果:

在特殊情况可能要发起请求,需要像下面一样请求:

在created中,获取路由参数,使用this.$route.query.参数来获取

 控制台打印:

 

2.动态路由传参

1.配置动态路由

图中这中以:结尾就是动态路由,它可以匹配很多路由,如:/search/home ,/search/detil        ......

等以/search/的下一级都能被匹配到。

演示:

先配置路由规则

2.配置导航链接

       to="/path/参数值"

3.对应页面组件接收传递过来的值

        $route.params.参数名

效果如图

 同样的如果要进行发起请求

在created中,获取路由参数,使用this.$route.params.参数来获取

 

控制台的效果是:

两种传参方式的区别


1.查询参数传参(比较适合传多个参数)

        1.跳转:to="/path?参数名=值&参数名2=值

        2.获取:$route.query.参数名
2.动态路由传参(优雅简洁,传单个参数比较方便)

        1.配置动态路由:path:"/path/参数名

        2.跳转:to="/path/参数值
        3.获取:$route.params.参数名

相关推荐

  1. 【React】react-router-dom导航

    2024-04-08 04:42:04       43 阅读
  2. vue3

    2024-04-08 04:42:04       35 阅读
  3. Vue

    2024-04-08 04:42:04       27 阅读
  4. vue3传递参数: params接收不到?

    2024-04-08 04:42:04       14 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-08 04:42:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-08 04:42:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-08 04:42:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-08 04:42:04       18 阅读

热门阅读

  1. hibernate检索方式

    2024-04-08 04:42:04       15 阅读
  2. 常见的几种字符串及其区别

    2024-04-08 04:42:04       16 阅读
  3. Linux介绍

    2024-04-08 04:42:04       14 阅读
  4. 记录CodeMirror一些常用的配置选项

    2024-04-08 04:42:04       18 阅读
  5. AI创业机会的探索

    2024-04-08 04:42:04       16 阅读
  6. MySQL-对象

    2024-04-08 04:42:04       13 阅读
  7. C++20 semaphore(信号量) 详解

    2024-04-08 04:42:04       13 阅读
  8. P1162 填涂颜色

    2024-04-08 04:42:04       18 阅读
  9. make命令简介

    2024-04-08 04:42:04       15 阅读
  10. 大学课堂点名程序

    2024-04-08 04:42:04       13 阅读
  11. Docker 入门

    2024-04-08 04:42:04       14 阅读
  12. 【Qt\C++】二维图形化故障树

    2024-04-08 04:42:04       12 阅读