springboot+vue全栈开发（2）--路由拼接参数实现组件切换

1.需求分析：

在很多的页面中共用布局来实现组件切换，例如在下述中，需要点击，个人资料，消息通知分别呈现不同的页面

2.实现思路：

点击不同的按钮的时候为路由拼接参数，通过vue-router来获取拼接的参数，通过v-if来控制组件的显示,还有一种实现的方式就是使用子路由通过router.push到不同的组件中

(1)导包

import { useRoute } from "vue-router";

(2)获取参数

const route=useRoute()

(3)为每一菜单创建点击事件

const changePath = (pagePath) => {
router.push({ query: { page: pagePath } });
};

(4)组件中调用函数

<el-menu
              :default-active="acitve_index"
              class="el-menu-vertical-demo"
              style="margin-top: 100px"
            >
              <el-menu-item
                index="1"
                @click="changePath('myInfo')"
              >
                <el-icon><User /></el-icon>
                <span>个人资料</span>
              </el-menu-item>
              <el-menu-item
                index="2"
                @click="changePath('messageTip')"
              >
                <el-icon><ChatDotRound /></el-icon>
                <span>消息通知</span>
              </el-menu-item>
              <el-menu-item
                index="3"
                @click="changePath('updatePwd')"

              >
                <el-icon><Lock /></el-icon>
                <span>修改密码</span>
              </el-menu-item>
            </el-menu>

通过上述操作之后就会发现，即使是点击菜单之后，url中的参数确实发生了变化，但是页面没有切换，需要手动点击刷新之后才可以却换
这个时候需要在父组件中控制router-view消失之后在渲染一次就可以达到效果

(4)重新渲染页面

在app.vue中创建变量让他首先为true，触发未来reload函数之后，让页面不刷新的情况下重新渲染一次
需要注意的是，子父页面中的provide和inject函数都是成对出现的

在个人中兴中调用reload函数，改造点击事件

const reload = inject("reload");
const changePath = (pagePath) => {
  router.push({ query: { page: pagePath } });
  route.query.page = pagePath;
  reload(); //重新渲染页面
};

在完成上述操作之后，整个的效果就实现了