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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
Js跳出两级循环方法代码实例
Sep 22 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
SMARTY学习手记
2007/01/04 PHP
网友原创的PHP模板类代码
2008/09/07 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Python可变参数用法实例分析
2017/04/02 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
django使用graphql的实例
2020/09/02 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
大学活动总结范文
2014/04/29 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
休假证明书
2015/06/24 职场文书
道士塔读书笔记
2015/06/30 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js