首页 > 其他分享 >Vue路由动态改变浏览器标题名称和图标样式

Vue路由动态改变浏览器标题名称和图标样式

时间:2022-08-31 20:24:56浏览次数:57  
标签:Vue 浏览器 title meta router home icon 路由 图标

路由

const router = new Router({
    mode: 'hash',
    base: process.env.BASE_URL,
    router:[
        {
            path: '/',
            redirect: 'home'
        },
        {
            path: '/home',
            name: 'home',
            meta: {
                title: '名称',
                auth: true,
                icon: '图片名称', // 图片的格式为 .ico,路径在 public 下
            }
            component: () => {
                return import('需要引入的组件名称')
            }
        }
    ]
})

 

 

路由守卫

router.beforeEach(async (to,from,next) => {
    //路由发生变化修改页面title
    if(to.meta.title){
        document.title = `$(to.meta.title)`
    }
    //路由发生变化修改页面图标
    if(to.meta.icon) {
        document.getElementByTagName('link')[0].setAttribute('href',to.meta.icon)
    }
})
 

 

标签:Vue,浏览器,title,meta,router,home,icon,路由,图标
From: https://www.cnblogs.com/c0lmd0wn/p/16644402.html

相关文章

  • @vue/cli 安装及'vue' 不是内部或外部命令解决办法
    1、首先安装@vue/clinpminstall-g@vue/cli提示安装成功,版本啥的,忘了截图2、然后vue-V或者vue--version查看版本但是提示'vue'不是内部或外部命令解决办法我......
  • js关闭微信浏览器页面
    在关闭微信某个H5网页时,window.close()有时候并不好使 【解决方案】://这个可以关闭安卓系统的手机document.addEventListener('WeixinJSBridgeReady',function(){W......
  • vue3进阶学习
    vue3进阶学习官方网站:https://v3.vuejs.org/中文文档:https://staging-cn.vuejs.org/guide/introduction.html目的:加强对vue3的学习了解vue3在生产环境下需要安装......
  • vue——vuex四个map方法的使用
    1.mapState方法:用于帮助我们映射state中的数据为计算属性注意1:mapState的作用:用来生成重复代码,比如returnthis$store.state.xxx就非常重复,无法复用。mapState采用{k:v}......
  • 20220829 第一组 于芮 Vue坏人Tomcat入门
     小白成长记——第三十七天    这几天的主要学习内容就是Vue以及简单的Tomcat在ideal中的配置,总体来说说学习内容很多,每天都很充实,时间都用来学习,整个人都很开心......
  • vue直接赋值后数据不更新
    在写vue的时候,存在某些情况,明明赋值给model了,页面数据不变化。原因我就不仔细分析了,下面直接上解决办法:1.1、Vue不能检测以下变动的数组当你利用索引直接设置一个项时,......
  • VUE学习2
    目录分析public目录index.html是起始的html文件#这是关键<divid="app"></div>src目录main.js是Vue项目的入口文件属性props:接受父组件传过来的值props:{m......
  • vue3+ts项目声明响应式数据
    说明:在项目开发中,需要声明响应式数据来实现界面的响应从而实现前后端数据的交互。我们主要分为两类来举例。基本数据类型声明方式letxxx=ref<type>('defaultValue'......
  • Vue中报npm WARN idealTree Removing dependencies.element-ui in favor of devDepend
    在添加element-ui的时候我是用的是:npmielement-ui--save-dev或npmielement-ui-S都会报错npmWARNidealTreeRemovingdependencies.element-uiinfavorofdevD......
  • Vue Cli4.5版本手机端适配(rem)
    1.安装amfe-flexible(根据屏幕动态改变根元素font-size,postcss-pxtorem把代码中px转为rem)npmiamfe-flexible-S2.安装postcss-pxtorem(一款PostCSS插件,用于将px单位转......