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 相关文章推荐
为javascript添加String.Format方法
Aug 11 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
DWR中各种java方法的调用
May 04 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 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 短链接算法收集与分析
2011/12/30 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
js 提交和设置表单的值
2008/12/19 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
python通过http下载文件的方法详解
2019/07/26 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
对照检查剖析材料
2014/09/30 职场文书
写给医院的感谢信
2015/01/22 职场文书
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python