目录

一.项目中实际使用

1.代码使用

二.元素

1.使用方式：

2.代码解释

---

一.项目中实际使用

1.代码使用

之前，我们使用过，在login相关的几个页面使用component 实现登录/注册/找回密码等页面的动态切换，在天转到这个页面时，传递一个参数，根据参数去显示不同的页面，（当然，你也可以选择将这些页面都加入到路由里，然后设置不同的跳转路径也是可以的）

<template><div class="loginCenter"><div class="left"><ImageShow></ImageShow></div><div class="right"><component :is="componentToShow"></component></div></div>
</template><script setup lang="ts">
import ImageShow from "./components/imageShow.vue"
import Login from "./components/login.vue"
import Register from "./components/register.vue"
import FindPasswaod from "./components/findPasswaod.vue"
import { useRoute } from "vue-router";
import {  ref, watch } from "vue";const judgePath = (path: any) => {if (path === 'login') {return Login} else if (path === 'register') {return Register} else if (path === 'findPassword') {return FindPasswaod}
}const route = useRoute()
const componentToShow = ref(judgePath(route.query.path)) // 使用 ref 进行响应式声明
watch(() => route.query.path,(newPath: any, old: any) => {// 当 route.query.path 发生变化时触发componentToShow.value = judgePath(newPath)}
);</script>

 

二.<component>元素

1.使用方式：

<component> 是Vue.js提供的一个特殊元素，它允许你根据变量或表达式的值来动态渲染不同的组件。

<component :is="componentToShow"></component>

:is 属性：通过 :is 属性绑定一个变量，这个变量的值将决定要渲染的组件。 

2.代码解释

在上述的代码中，componentToShow 是一个响应式变量，它的值由路由参数 route.query.path 决定。通过这种设置，你可以动态地选择要渲染的组件。

const componentToShow = ref(judgePath(route.query.path)) // 使用 ref 进行响应式声明watch(() => route.query.path,(newPath: any, old: any) => {// 当 route.query.path 发生变化时触发componentToShow.value = judgePath(newPath)}
);

• ref: 使用 ref 创建一个响应式变量，确保当 componentToShow 的值改变时，视图能够及时更新。
• watch: 监听 route.query.path 的变化，一旦路径发生变化，执行回调函数，将新的组件赋给 componentToShow，触发动态组件的重新加载。

通过这种方式，可以根据路由参数动态地切换和加载不同的组件，使应用更具有灵活性和可扩展性。这对于处理不同页面或用户操作需要显示不同内容的情况非常有用。