<router-view/> 被弃用

`<router-view>` 不是被弃用了，而是在 Vue Router 4 中，它的默认导出方式变成了 `defineAsyncComponent(() => import('vue-router'))`。这是因为在 Vue 3 中，动态导入组件的方式发生了变化，使用 `defineAsyncComponent` 来替代 `import()` 更符合新的语法规范。因此，在 Vue Router 4 中，使用 `<router-view>` 仍然是可以的，只需要在组件中按照新的导入方式引入 `defineAsyncComponent` 即可。

相关问题

<template> <router-view></router-view> </template>

这是Vue框架中的模板代码，<template>是Vue中定义模板的标签，<router-view>是Vue Router中用来显示组件的占位符，当我们在Vue Router中定义路由后，路由对应的组件会通过<router-view>显示在页面上。

需要注意的是，<template>标签在HTML中是不存在的，它只是Vue框架中的语法糖，用于包裹组件的模板。当Vue编译模板时，<template>标签会被解析成真实的HTML标签，并且不会在页面上显示。

<router-view></router-view>使用

<router-view></router-view>是vue-router中的核心组件，用于渲染匹配到的路由组件。在你提供的代码中，<router-view></router-view>被放置在App.vue文件中的template标签内，这是通常的做法。在router.js文件中，配置了路由的映射关系，每个路由都对应一个组件。当路由匹配成功时，<router-view></router-view>会渲染对应的组件。

在你的代码中，router.js配置了名为routerViewPractice的路由，它对应的组件是index.vue。当访问"/routerViewPractice"路径时，<router-view></router-view>会渲染index.vue组件。此外，该路由还有三个子路由：messagePage、contactPage和dynamicPage。当访问对应的子路径时，<router-view></router-view>会渲染相应的子组件。

在使用<router-view></router-view>时，你需要确保已经正确配置了路由，并且确保路由路径与组件的对应关系正确。另外，还需要在主入口文件main.js中注册Vue Router。