❤
npm
Sign UpSign In

vue-document-title-plugin

1.0.4 • Public • Published

支持vue-router(version >= 2.0)导航切换更改document.title
npm npm license GitHub stars

Features

Installation

  • via CDN
  <script src="https://unpkg.com/vue-document-title-plugin/dist/vue-document-title-plugin.min.js"></script> 

simple example

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script> 
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 
  <script src="https://unpkg.com/vue-document-title-plugin/dist/vue-document-title-plugin.min.js"></script> 
</head>
 
<body>
  <div id="app">
    <button @click="change">change title</button>
    <button @click="get">get title</button>
    <router-view></router-view>
  </div>
  <template id="index">
    <div>
      <h1>this is index page</h1>
      <router-link to="/list">go to list</router-link>
    </div>
  </template>
  <template id="list">
    <div>
      <h1>this is list page</h1>
      <router-link to="/">go to index</router-link>
    </div>
  </template>
  <script>
    Vue.use(VueRouter);
    var router = new VueRouter({
      routes: [{
        path: "/",
        component: { template: "#index" },
        meta: { title: "首页" }
      }, {
        path: "/list",
        component: { template: "#list" },
        meta: { title: "列表页" }
      }]
    });
    Vue.use(vueDocumentTitlePlugin, router, { filter: function (title) { return title + "[balabala]" } });
    new Vue({
      el: "#app",
      router,
      methods: {
        change: function () {
          this.$doc.title = "xxxx";
        },
        get: function () {
          alert(this.$doc.title);
        }
      }
    })
  </script> 
</body>
 
</html>
  • via NPM
$ npm install vue-document-title-plugin --save # Or 
$ yarn add vue-document-title-plugin

simple example

  // main.js
  import Vue from "vue";
  import VueRouter from "vue-router";
  import VueDocumentTitlePlugin from "vue-document-title-plugin";
  Vue.use(VueRouter); 
  const router = new VueRouter({
    routes: [{
      path: "/",
       // component: 
       meta: { title: "首页" } // 导航到这个路由document.title会变成 首页【网站名称】
    }]
  });
  Vue.use(VueDocumentTitlePlugin, router, { defTitle: "【网站名称】", filter: title => `${title}【网站名称】` });

Readme

Keywords

Package Sidebar

Install

npm i vue-document-title-plugin

Repository

github.com/shmy/vue-document-title-plugin

Homepage

github.com/shmy/vue-document-title-plugin#readme

Weekly Downloads

1

Version

1.0.4

License

MIT

Last publish

Collaborators

  • shmy
Try on RunKit
Report malware