vue 路径更新,视图不更新

235 阅读1分钟

有一个需求,点击 订单改价 后跳转到另外一个页面

使用this.$router.push()后,路径改变了,但是页面没变化。

分析:路径改变后,子路由没有相关的视图容器装载

所以我们就添加一个视图容器(router-view),添加后发现,子路由拼接在父页面的后面了,

所以我们还得做一个v-if判断,来控制展示哪一个页面

下面是例子

<template v-if="currentPage">
	//当前父页面的内容
</template>
  //下面router-view负责展示子页面或者是跳转的页面
<router-view v-else />

 data(){
    return {
        currentPage:true,
    }
 },
//监听当前路由变化,然后通过控制currentPage来控制展示的页面
 watch:{
  $route:{
      handler(newVal){
          if(newVal.path==='/me/sold'){
              this.currentPage=true
          }else{
              this.currentPage=false
          }
      },
      deep:true
  }
},
//路由配置
{
    path: "/me/sold",
    component: () => import("@/views/me/sold/index.vue"),
    name: "MeSold",
    meta: { title: "我卖出的", keepAlive: false, scrollTop: 0 },
    children: [
      {
        path: "deliverInfo",
        component: () => import("@/views/me/sold/deliverInfo/index.vue"),
        name: "MeSoldDeliver",
        meta: { title: "填写发货信息", keepAlive: false, scrollTop: 0 },
      },
    ],
  },