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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 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
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
php微信开发之关注事件
2018/06/14 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
javascript常用函数(1)
2015/11/04 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
js实现导航跟随效果
2018/11/17 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
vue--vuex详解
2019/04/15 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
老生常谈Python序列化和反序列化
2017/06/28 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
企业车辆管理制度
2014/01/24 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
班主任先进事迹材料
2014/12/17 职场文书
八一建军节慰问信
2015/02/14 职场文书
狂人日记读书笔记
2015/06/30 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
php实现自动生成验证码的实例讲解
2021/11/17 PHP
python 实现图片特效处理
2022/04/03 Python