4.更改浏览器标题栏图标、title

1.更改浏览器标题栏图标

注意：vue项目中不管是ico、jpg、png格式，照片文件都要放在static文件夹下面，然后再去更改index.html
方法一：<link rel='icon' type='image/jpg' href='./static/cjl.jpg'>（缺点：如果照片不是正方形会被拉缩）
方法二：<link rel='icon' type='image/x-icon' href='./static/favicon.ico'>（在线制作ico网站：https://www.bitbug.net/）
//更改index.html文件
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" type="image/jpg" href="./static/cjl.jpg" /> //方法一
    <link rel='icon' type='image/x-icon' href='./static/favicon.ico'> //方法二
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 

2.更改title

方法一：更改src/router.index.js文件

/* 路由元信息结合路由导航钩子来实现 */
import Vue from "vue";
import Router from "vue-router";
import Home from "@/components/Home";

Vue.use(Router);

const routes = [
  {
    path: "/",
    redirect: "/home" // 路由重定向
  },
  {
    path: "/home",
    component: Home,
    name: "Home",
    // 1.设置浏览器标题栏title
    meta: {
      title: "web前端知识库"
    }
  }
];

const router = new Router({
  routes,
});

router.afterEach((to, from) => {
  document.title = to.meta.title; // 2.在全局后置守卫中获取路由元信息，设置title
});

export default router;

方法二：在main.js中注册全局自定义指令，然后在需要设置浏览器导航栏title的组件最外层标签上面书写title内容

//步骤一：在main.js中注册全局自定义指令
// 添加全局自定义指令
Vue.directive('title',{ //单个修改标题
  inserted:function(el,binding){
    document.title=el.dataset.title
  }
})
//步骤二：在需要设置浏览器导航栏title的组件最外层标签上面书写title内容
<template>
  <div v-title data-title="web前端知识库">123</div>
</template>

 

 

posted @ 2021-03-16 21:08  cjl2019  阅读(83)  评论(0)  编辑  收藏  举报