vue3.0中设置网页title

1.在public/index.html中设置title

<title><%= htmlWebpackPlugin.options.title %></title>

2.路由中设置meta

// 路由配置规则
const routes: Array<RouteConfig> = [{path: '/login',name: 'login',meta:{title: '登录'},component: () => import(/* webpackChunkName: 'login' */ '@/views/login/index.vue')},{path: '/',component: Layout,meta: {requiresAuth: true,title: '首页'},children: [{path: '', // 默认子路由name: 'home',meta: {requiresAuth: true,title: '首页'},component: () => import(/* webpackChunkName: 'home' */ '@/views/home/index.vue')},{path: '/role',name: 'role',meta: {title: '角色'},component: () => import(/* webpackChunkName: 'role' */ '@/views/role/index.vue')}]}]

3.在路由守卫中设置document.title

// 全局前置守卫：任何页面的访问都要经过这里
// to：要去哪里的路由信息
// from：从哪里来的路由信息
// next：通行的标志
router.beforeEach((to, from, next) => {document.title = to.meta.title ? to.meta.title : '管理平台';// to.matched 是一个数组（匹配到是路由记录）// to.matched.some(record => record.meta.requiresAuth)if (to.meta.requiresAuth) {if (!store.state.user) {// 跳转到登录页面next({name: 'login',query: { // 通过 url 传递查询字符串参数redirect: to.fullPath // 把登录成功需要返回的页面告诉登录页面}})} else {next() // 允许通过}} else {next() // 允许通过}

4.附加知识点

存在页面有很多组件，不同组件也要展示不同title，实现如下：

（1）main.js创建自定义指令

import { createApp } from 'vue';
......
const app = createApp(App)
app.directive('title', {mounted(el){document.title = el.dataset.title}
})
app.use(store).use(router).use(ElementPlus).mount('#app');

（2）vue页面中使用

<template><div class="advert" v-title data-title="添加新闻">广告管理</div>
</template>

技术都是在不断摸索中成长的~~~
加油ヾ(◍°∇°◍)ﾉﾞ

vue3.0中设置网页title相关推荐

vue 3.0中设置网页title
还有一种使用插件:https://juejin.cn/post/6844904165139808269 单页面应用渲染:https://juejin.cn/post/70228052388431790 ...
vue3.0中props父子传值的改动
前言: 对vue3.0的学习以及对技术更新升级内容的整理与使用,这里分析下他的props父子传值的改动. vue官方入口目录一.vue2.0中props的用法 1.父组件中 a.vue中 2.子组 ...
vue3.0中setup使用(两种用法)
这篇文章主要介绍了vue3.0中setup使用,本文通过两种用法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下一.setup函数的特性以及作用可以确定的是 V ...
Vue3.0中的变化
1.Vue3 简介 2020 年 9 月 18 日,Vue.js 发布 3.0 版本,代号:One Piece(海贼王) 2.Vue3 带来了什么 1.性能的提升打包大小减少 41% 初次渲染快 5 ...
vue3.0中使用Element-plus默认英文组件修改为中文
vue3.0中使用Element-plus默认英文组件修改为中文修改方法说明:本方法Element-plus 1.0.2-beta.59 之前的版本可以,1.0.2-beta.59之后版本请看下一篇 ...
关于CFree5.0中设置支持C99模式
关于C-Free5.0中设置支持C99模式,分为以下几个步骤: 1.打开C-Free5.0,在左上角找到'构建(B)' 2.展开'构建(B)',点击最下方的'构建选项' 3.在'编译'一栏看到红色框区 ...
vue3.0中找不到组件或者找不到对应的类型声明。怎么解决
vue3.0中找不到组件或者找不到对应的类型声明如何解决? 这里报错 .报错原因报错就是ts影响找不到组件模块或者找不到对应的类型声明 typescript 只能理解 .ts 文件,无法理解 . ...
vue3.0中使用elementUi(element-plus的使用)
element-plus的使用小朋友,你是不是有很多问号❓❓❓ 甲:为什么在vue3.0中不能使用Element UI了? 乙:由于vue3.0在插件install函数的入参从Vue原型(类)改成了 ...
在vue3.0中如何去除网址中的#
vue的history模式的实现在vue3.0中如何去除网址中的#号 history模式在vue3.0中如何去除网址中的#号事情是这样的,最近在用vue写一个商场的项目,当时对于页面网址美观程度 ...

vue3.0中设置网页title

1.在public/index.html中设置title

2.路由中设置meta

3.在路由守卫中设置document.title

4.附加知识点

（1）main.js创建自定义指令

（2）vue页面中使用

vue3.0中设置网页title相关推荐

最新文章

热门文章