技术标签: 笔记记录 Vue 前端 vue.js javascript
还有一种使用插件:https://juejin.cn/post/6844904165139808269
单页面应用渲染:https://juejin.cn/post/7022805238843179015#comment
单页面应用渲染:https://blog.csdn.net/qq_43548590/article/details/127788598
<title><%= htmlWebpackPlugin.options.title %></title>
// 路由配置规则
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')
}
]
}
]
// 全局前置守卫:任何页面的访问都要经过这里
// 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() // 允许通过
}
存在页面有很多组件,不同组件也要展示不同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>
文章浏览阅读434次。刚开始学习jsp的程序员都会遇到这样一个问题,就是网页上的中文无法显示.总结了以下几条方法。 1、在jsp页中加入一条语句: 中文显示就正常了。 2、对于从网页中的文本框通过String parameter = request.getParameter(“parameter”);方式获得的字符串,均是8859_1的编码,如果想把它显示在网页上就必须得用parameter = new_jsp中文字乱码
文章浏览阅读6.8k次。需要打开威联通SSH功能;WinSCP官网下载软件下载路径通过威联通admin账户(重要)登录WinSCP,便可访问到威联通软件安装路径;利用WinSCP连接威联通成功后,点击“命令”菜单图标,即可采用命令访问威联通文件。..._威联通winscp
文章浏览阅读1.4k次。How to build toolchainenv setup主机环境: ubuntu-20.04.3-desktop-amd64.iso安装包 : sudo apt-get install net-tools openssh-server git vim make gcc gawk bison flex texinfo automake libtool-bin cvs libncurses5-dev ninja-build libglib2.0-dev libpixman-1-dev help_riscv64-unknown-elf-gcc
文章浏览阅读183次。注意: 模块的名称不要以数字开头,不要是关键字,一般都是小写,可以字母数字下划线汉字组成(不建议)举例: 当前模块定义名称为:文件操作# 读取文件中的列表,并且把字符串类型转为列表本身# 写列表数据到文件中。_以色列 网络爬虫
文章浏览阅读6.1k次,点赞10次,收藏90次。点击关注公众号,回复“1024”获取2TB学习资源!一.对CRM的项目的简单描述1.什么是CRMCRM系统即客户关系管理系统,是指企业用CRM技术来管理与客户之间的关系。他的目标是缩减销售..._高净值crm项目 投入产出
文章浏览阅读931次。常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A..._电影网站设计代码
文章浏览阅读140次。Spark and Hadoop碎片知识点合集
文章浏览阅读72次。vue自定义指令vue中除了核心功能内置的指令外,也允许注册自定义指令。有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令。自定义指令又分为全局的自定义指令和局部自定义指令。全局自定义指令全局注册主要是用过Vue.directive方法进行注册Vue.directive第一个参数是指令的名字(不需要写上v-前缀),第二个参数可以是对象数据。// 注册一个全局自定义指令 `v-focalize`Vue.directive('focalize', { // 当被绑定的元素插入
文章浏览阅读407次。根目录下自定义组件新建custom-tab-bar/index把点击的active定义为共享的数据store.js// 创建store实例// 定义共享数据 数据字段activeTabBarIndex:0, //点击的下标})})wxmljsstore,},}},})}},/*** 组件的初始数据*/data: {{"text": "首页",},{"text": "消息",},{"text": "联系我们",},{_一个app包括json js和dll
文章浏览阅读217次,点赞3次,收藏5次。数据类型转换、引用传值(可变类型、不可变类型)
文章浏览阅读628次,点赞23次,收藏8次。第十二章:预处理命令宏定义、文件包含处理
文章浏览阅读343次,点赞5次,收藏8次。虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算**对于从来没有接触过网络安全的同学,我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线,大家跟着这个大的方向学习准没问题。,朋友们如果有需要全套《网络安全入门+黑客进阶学习资源包》,可以扫描下方二维码领取(如遇扫码问题,可以在评论区留言领取哦)~还有大家最喜欢的黑客技术。