动态修改vue-cli的spa的标题

喜欢ヅ旅行 2022-05-29 07:07 180阅读 0赞

import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '@/components/home'
    import Items from '@/components/Items'
    import Waterfull from '@/components/Waterfull'
    
    Vue.use(Router)
    
    const router = new Router({
      mode: 'history',
      routes: [
        {
          path: '/',
          name: 'home',
          alias: '/home',
          meta: {
            title: '首页'
          },
          component: Home
        },
        {
          path: '/items',
          name: 'Items',
          meta: {
            title: 'web项目'
          },
          component: Items
        },
        {
          path: '/items/Waterfull',
          name: 'Waterfull',
          meta: {
            title: '瀑布流'
          },
          component: Waterfull
        }
      ]
    })
    
    router.beforeEach(function(to,from,next){
        if(to.meta.title){
            document.title = to.meta.title
        }else{
            document.title = 'personal learn'
        }
        next()
    })
    
    export default router

主要通过

router.beforeEach(function(to,from,next){
        if(to.meta.title){
            document.title = to.meta.title
        }else{
            document.title = 'personal learn'
        }
        next()
    })

进行修改；

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE修改页面的标题

重点代码 meta:{ title:'首页'} 完整代码 import Vue from 'vue' import Router from

﹏ヽ暗。殇╰゛Y/ 2022年11月29日 03:20/ 0 赞/ 195 阅读

相关 Vue 动态修改网页标题和图标

VUE2：二、普通方案，使用Vue-Router的beforeEach拦截 routes: [{ path: '/',

川长思鸟来/ 2022年11月07日 01:44/ 0 赞/ 1037 阅读

相关微信小程序动态修改页面标题setNavigationBarTitle

微信小程序是可以动态修改页面标题的。首先我们来看看静态是怎么实现的 ![这里写图片描述][format_png] 在对应页面的json文件里面加入下面代码就可以实

女爷i/ 2022年06月03日 07:46/ 0 赞/ 281 阅读

相关动态修改vue-cli的spa的标题

import Vue from 'vue' import Router from 'vue-router' import Home from '@/co

喜欢ヅ旅行/ 2022年05月29日 07:07/ 0 赞/ 181 阅读

相关动态标题栏

一介绍设置动态标题栏可以使用title属性来实现。 title属性用来获取或设置文档的标题。语法： \[Title=\]document.title\[=setT

朱雀/ 2022年05月12日 00:08/ 0 赞/ 310 阅读

相关修改tomcat窗口的标题

找到tomcat的安装目录，在bin文件下修改catalina.bat文件 ![在这里插入图片描述][20190304085450327.png] 使用记事本方式打开

港控/mmm°/ 2022年03月14日 09:14/ 0 赞/ 284 阅读

相关微信小程序系列——动态修改页面标题

页面标题，动态获取修改： onLoad: function(options) { wx.setNavigationBarTitle({

绝地灬酷狼/ 2022年02月24日 07:00/ 0 赞/ 347 阅读

相关微信小程序：动态修改页面的标题

onLoad () { console.log('onLoad') console.log(this.$root.$mp.query)

╰半橙微兮°/ 2021年12月21日 02:33/ 0 赞/ 322 阅读

相关微信小程序 - 动态修改页面标题setNavigationBarTitle

微信小程序是可以动态修改页面标题的。在我们开发小程序的时候我们会时不时的需要修改某个页面的标题，这时我们可以单个进行修改。下面我来介绍一下： 1、在对应页面的json

柔情只为你懂/ 2021年09月30日 10:48/ 0 赞/ 696 阅读

相关 uniapp如何动态修改导航栏标题

在开发中我们往往会遇到一个页面有好多种支付状态的 , 这个时候头部的标题也要跟着动态变化的 , 一段代码搞定. 只需要这个段代码就可以搞定 uni.setNavig

朴灿烈づ我的快乐病毒、/ 2021年07月25日 13:09/ 0 赞/ 830 阅读