【Vue3】动态修改页面名称

目录

准备工具

步骤：

1.设置页面展示router-view

2.新建index.js并写入路由

3.编辑App.vue

效果

注意：使用config.url配置网站

---

准备工具

• 导入vue router依赖

步骤：

1.设置页面展示router-view

（通常会是app.vue）

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

2.新建index.js并写入路由

import { createRouter, createWebHistory } from 'vue-router';


const routes = [
  {  
    path: '/', 
    component: MovieContent, 
    name: 'home' ,
    meta: { title: '首页' }//每个路由将要显示的标题在此编辑
  },
  {
    path:'/cinema', 
    component:CinemaContent, 
    name:'cinema',
    meta: { title: '影院列表' }
  },
  { 
    path:'/login',  
    component:UserLogin, 
    name:'login' ,
    meta: { title: '登录' }
  },
  {
    path: '/movie/:movieId',
    name: 'MovieDetail',
    component: MovieDetail,
    meta: { title: '电影详情' }
  },
  {
    path: '/cinema/:cinemaId',
    component: CinemaDetail,
    name:"CinemaDetail",
    meta: { title: '影院详情' }
  },
];

const router = createRouter({
  history: createWebHistory(config.uri),//注意先在config.url里面配置后端地址
  routes,
});

• 在此处需import所有需要挂载到路由上面的组件

• 在写 history: createWebHistory(config.uri),时注意先在config.url里面配置后端地址

3.编辑App.vue

在script部分的代码：

<script>
export default {
  name: 'App',
  components: {

  },
  watch: {
    $route(to, from) {
      document.title = "FLOX - " + to.meta.title || '默认标题';
    }
  },
  mounted() {
    document.title = "FLOX - " + this.$route.meta.title || '默认标题';
  }
}
</script>

• 页面显示的标题由document.title控制
• this.$route.meta.title 也即在index.js里面定义的路由标题

效果

成功实现动态改变路由标题

注意：使用config.url配置网站

（未完待续）