有一个需求,点击 订单改价 后跳转到另外一个页面
使用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 },
},
],
},