在 Vue 3 应用中修改网页标题通常涉及到监听路由变化并根据当前路由设置相应的标题。这可以通过 Vue Router 的导航守卫（navigation guards）来实现。

以下是如何在 Vue 3 应用中修改网址标题的步骤：

  1. 安装 Vue Router： 确保你的 Vue 3 项目中已经安装了 Vue Router。

  2. 创建路由配置： 在路由配置文件中（通常是 router/index.js 或 router.js），你可以使用路由记录（route records）的 meta 字段来存储每个路由的标题信息。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { title: '首页' }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { title: '关于我们' }
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;
  1. 设置标题： 在主应用中，你可以使用 useRoute 钩子来获取当前路由，并根据路由的 meta 字段设置文档标题。
// main.js 或 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);

router.afterEach((to, from) => {
  if (to.meta.title) {
    document.title = to.meta.title;
  }
});

app.mount('#app');
  1. 在组件中使用： 如果你想要更细粒度的控制，也可以在组件内部使用 onBeforeMount 和 onUnmounted 生命周期钩子来设置和重置标题。
// 单个组件中
<script>
import { onBeforeMount, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    onBeforeMount(() => {
      document.title = route.meta.title;
    });

    onUnmounted(() => {
      document.title = '默认标题';
    });
  }
};
</script>
  1. 构建和部署： 当你构建和部署应用时，确保你的服务器配置能够正确处理 SPA（单页面应用）的路由请求，以便每个路由都能显示正确的标题。

通过这些步骤，你可以在 Vue 3 应用中根据当前路由动态修改网页标题。这有助于提升用户体验，使用户能够通过浏览器标签页清楚地知道当前页面的内容。