Vue 动态设置路由参数的案例分析


Posted in Javascript onApril 24, 2018

在vue中 可以动态设置路由参数:

1.使用this.$router.go(),与js histroy.go() 用法一直,前进1,后退-1,当前页面:0

注意 使用go时 必须是已经有访问历史记录了

案例:

<template>
  <div> 
    <button @click="goht">后退<button> <br/>
    <button @click="goqj">前进<button> <br/>
    <button @click="gosx">刷新当前<button>
  </div>
 </template>
 <script>
  export default {
    methods: {
     goht(){
       this.$router.go(-1);
     },
     goqj(){
        this.$router.go(1);
     },
     gosx(){
       this.$router.go(0); //或者 this.$router.go(); 
     }
    }
  }
 </script>

2.使用push调用:

案例

<template>
  <div>
     <button @click="pageA">去A页面</button> <br/>
     <button @click="pageB">去B页面</button> <br/>
  </div>
</template>
<script> 
 exprot default {
  methods: {
     pageA(){
        //去路由A页面,字符串形式只能是path,类似to="path"
       this.$router.push('/RouterA'); 
     },
     pageB(){
        //去路由B页面,数组形式,类似 :to="{}"
       this.$router.push(
         {
          name: 'RouterB',
          query: {'name': 'name1', title: 'title1'}
          //,params:{'name': 'name2', title: 'title2'}
         }
       );
     }
   }
 }
</script>

总结

以上所述是小编给大家介绍的Vue 动态设置路由参数的案例分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS验证身份证有效性示例
Oct 11 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
a标签调用js的方法总结
Sep 05 Javascript
vue实现简单图片上传
Jun 30 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 #Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 #Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 #Javascript
vue中$refs的用法及作用详解
Apr 24 #Javascript
vue实现选项卡及选项卡切换效果
Apr 24 #Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 #Javascript
js 图片转base64的方式(两种)
Apr 24 #Javascript
You might like
URL Rewrite的设置方法
2007/01/02 PHP
生成php程序的php代码
2008/04/07 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php生成图片验证码
2015/06/09 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
原生js写的放大镜效果
2012/08/22 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
Python中print和return的作用及区别解析
2019/05/05 Python
python的scipy实现插值的示例代码
2019/11/12 Python
python实现XML解析的方法解析
2019/11/16 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
python数据分析:关键字提取方式
2020/02/24 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
营业员实习自我鉴定
2013/12/07 职场文书
先进事迹材料范文
2014/12/29 职场文书
高中英语教学反思范文
2016/03/02 职场文书