vue 爬坑之路 - 路由重定向

偏执的太偏执、 2023-06-30 09:15 23阅读 0赞

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

问题：

http://localhost/dist/productInfo/1

跳转

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

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

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

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

说干咱就干

//   1-19更新，这个方法不完善，ios这样是打不开的

首先：

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

创建重定向的页面  redirect.vue

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()
            }
          }

到此，解决问题。

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

1-19更新：改完bug后的代码

路由重定向官方文档的地址：

[https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html\#%E9%87%8D%E5%AE%9A%E5%90%91][https_router.vuejs.org_zh_guide_essentials_redirect-and-alias.html_E9_87_8D_E5_AE_9A_E5_90_91]

我的写法：

{path:'/redirect:path*',component:redirect,name:'redirect',
        redirect: to => {
          const { params, query } = to;
          if (params.path) {
            return params.path
          } else {
            return '/dist/home'
          }
           }
        },

调用：

this.$router.push({
             name:'redirect',
             params: {
              path:'/dist/productInfo/'+id, //这个是重定向的路径
            },
         });

这样不用redirect文件就可以了

我在redirect的路由跳转里面判断了一下params.path里面有没有值，如果有值的的话就重定向到params.path里面。

[https_router.vuejs.org_zh_guide_essentials_redirect-and-alias.html_E9_87_8D_E5_AE_9A_E5_90_91]: https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html#%E9%87%8D%E5%AE%9A%E5%90%91