虚位以待(AD)
虚位以待(AD)
首页 > 网页特效 > JavaScript > Vue 动态设置路由参数的案例分析

Vue 动态设置路由参数的案例分析
类别:JavaScript   作者:码皇   来源:互联网   点击:

这篇文章主要介绍了Vue 动态设置路由参数的案例分析,非常不错,具有参考借鉴价值,需要的朋友可以参考下

在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 动态设置路由参数的案例分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • vue2.0实现移动端的输入框实时检索更新列表功能
  • Vue + better-scroll 实现移动端字母索引导航功能
  • Vue利用canvas实现移动端手写板的方法
  • vue 做移动端微信公众号采坑经验记录
  • vue2.0 移动端实现下拉刷新和上拉加载更多的示例
  • Vue三层嵌套路由的示例代码
  • vue嵌套路由与404重定向实现方法分析
  • vue router动态路由下让每个子路由都是独立组件的解决方案
  • vue iview实现动态路由和权限验证功能
  • vue移动端路由切换实例分析
相关热词搜索: vue 动态路由参数 vue 动态路由