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 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
javascript判断office版本示例
Apr 11 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
window.open()实现post传递参数
Mar 12 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 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扩展图文教程
2008/12/12 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
js 目录列举函数
2008/11/06 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
Python中操作符重载用法分析
2016/04/29 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
解析Python3中的Import
2019/10/13 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
财务出纳员岗位职责
2013/11/26 职场文书
中层干部岗位职责
2013/12/18 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
环境卫生倡议书
2014/08/29 职场文书
2015中秋祝酒词
2015/08/12 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js
MySQL数据库 任意ip连接方法
2022/05/20 MySQL
python 镜像环境搭建总结
2022/09/23 Python