vue路由传参的俩种方式

vue 同时被 2 个专栏收录
82 篇文章 0 订阅
183 篇文章 0 订阅

1.查询字符串式传参

<router-link to="/user/login?name=alice&pas=123" tag="li">登陆</router-link>

this.$router.push({path:"/home,query:{name:"alice",pas:"123"});

参数获取  重要的事情说三遍 是 route  route route 上面跳转的哪个是 $router  一个是vueRouter的实例 一个是跳转页面的对象

       // $route.query获取地址栏参数    $route获取地址栏参数  
      // $route.push  相当于跳转地址  $route.replace替换 不产生历史记录
      template:"<h1>这个是用户登陆......{{$route.query}},{{$route.path}}</h1>"

 

2.resful规则传参

path:"regist/:username/:password",   路由注册

<router-link to="/user/regist/alice/123" tag="li">注册</router-link>

template:"<h1>这个是用户注册......获取参数:{{$route.params}},{{$route.path}}</h1>"

3.在组件中 点击按钮跳转 

  this.$router.push({path:"/user",params:{name:"alice",pass:"123"});

4.路由重定向:

   {
        path:'*',
        redirect:"/home"   //重定向
      }

5.//没有历史记录  没有历史记录的替换 跳转
          router.replace({path:"/home"})



  

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 护眼 设计师:闪电赇 返回首页

打赏

yunchong_zhao

帮到你了,请作者喝杯矿泉水可好

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值