vue-router传递参数3种方法

第一种:get方法

传递值

<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>

接收值

this.$route.query.name

第二种:post方法

传递值

<router-link :to="{path:'/test',push: {name: id}}">跳转</router-link>

接收值

this.$route.params.name  (在页面刷新的时候就会消失)

第三种:路由方法

传递值

//?问号的意思是该参数不是必传项
//多个参数用/:id连接
//path: '/Driver/CarManager/CarSetting/:car_id/:page_type',
{
    path: 'test/:name?',
    name: 'test',
    component: 'test.vue',
    props: true,
},

接收值

props:{name:{required:false,default:''}} (页面刷新不消失,可以在路由配置中设置参数)

-----------------------------------分割线--------------------------------------------

另外: 如果在链接上设置 replace 属性,当点击时,会调用 router.replace() 而不是 router.push(),于是浏览器不会留下 history 记录。
  <router-link :to="{ path: '/abc'}" replace></router-link>
tips: 简书上交流可能会看不到消息,如有问题,欢迎进群交流50063010
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • 路由实现的方式 声明式。<router-link :to="..."> 编程式。router.push(...) ...
    SailingBytes阅读 1,127评论 1 3
  • 一、基本用法 React Router 安装命令如下。 $ npm install -S react-router...
    sunnyghx阅读 4,533评论 0 6
  • 安装 直接下载 在Vue后面加载vue-router,它会自动安装的: NPM 如果在一个模块化工程中使用它,必须...
    oWSQo阅读 783评论 0 0
  • 前段时间还在想我是应该靠感觉赋予文字以生命,让其自然流淌,还是保持冷静与理智,克制感性的部分,可是在这感性枯竭的时...
    李有仙阅读 256评论 0 0