vue 爬坑之路 - 路由重定向

vue新手,本文纯属自己摸索出来的,如有错误,请指正,感谢感谢。

问题:

http://localhost/dist/productInfo/1

跳转

http://localhost/dist/productInfo/2 页 路由变化了但是页面并没有重新绘制

最初的想法是用router.go(0);这个办法虽然猥猥琐琐的解决了跳转过去的时候页面没有重新绘制的问题,但是却不能改变回退页面时页面同样不刷新的问题,治标不治本。

然后就准备弄了路由重定向

我的想法就是统一跳转到重定向的页面,再由这个页面拼接路由参数,跳转对应页面

说干咱就干

首先:

新建路由重定向页面,在router下面引入该页面

创建重定向的页面  redirect.vue

<script>
export default {
  created() {
    const { query } = this.$route;
    this.$router.replace({ path: '/' + query.path, query: query.query });
  },
  render: function(h) {
    return h() // avoid warning message
  }
}
</script>

router.js文件引入

import redirect from './redirect.vue'//文件路径
{path:'/redirect',component:redirect,name:'redirect'},

重定向跳转

this.$router.push({
          path:'/redirect',
          query: {
            path:'dist/productInfo/115',
          }
        })

emmm,这样下来发现跳转页面是可以了,但是回退还是有问题。

思索一番后,委委屈屈的在productInfo页面监听一下路由

判断路由后面的参数是否改变,如果改变了就重新调用接口,绘制页面

'$route' (to, from) {
        //监听路由是否变化 ,不会的可以把to和from打印出来看看
        if(to.params.id !== from.params.id){
           // 这块我本来用的this.$forceUpdate,但是这个方法比较有脾气,不叼我,然后我就重新调取接口方法了
          this.init()
        }
      }

到此,解决问题。

新手新手,哪里写的不好的,请多多包含。

发布了34 篇原创文章 · 获赞 9 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览