vue设置页面标题title

最新推荐文章于 2024-08-03 20:57:01 发布

Wooofe。

最新推荐文章于 2024-08-03 20:57:01 发布

阅读量340

点赞数 1

分类专栏： vue 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/weixin_52046784/article/details/120036437

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

每个页面设置相同标题

index.html

直接修改title标签里面的标题
(ps: 这个html文件中也可以引入一些js文件)

每个页面设置不同标题

public-index.html

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="pragma" content="no-cache">
  <meta name=renderer content=webkit>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

router - index.js

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/index',
            name: 'index',
            component: Index,
            meta:{
                // 页面标题title
                title: '首页'
            }
        },
        {
            path: '/content',
            name: 'content',
            component: Content,
            meta:{
                title: '内容'
            }
        }
    ]
})
export default router

main.js

import router from './router'
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

Wooofe。

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue设置页面标题title

每个页面设置相同标题index.html直接修改title标签里面的标题(ps: 这个html文件中也可以引入一些js文件)每个页面设置不同标题public-index.html<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="pragma" content="
复制链接

扫一扫

专栏目录