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和JQuery实用代码片段(一)
Apr 07 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
JavaScript入门基础
Aug 12 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
修改npm全局安装模式的路径方法
May 15 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连mysql和oracle数据库性能比较
2006/10/09 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
php牛逼的面试题分享
2013/01/18 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
python eventlet绿化和patch原理
2020/11/21 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
英国领先的游戏零售商:GAME
2019/09/24 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
类如何去实现接口
2013/12/19 面试题
医学院校毕业生自荐信范文
2014/01/01 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
银行贷款承诺书
2014/03/29 职场文书
温馨提示标语
2014/06/26 职场文书
软环境建设心得体会
2014/09/09 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL