vue-document-title-plugin

vue-router plugin

latest

Source

npm

Version: 1.0.4

Version published: 9 years ago

Maintainers: 1

Created: 9 years ago

Source

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

Features

支持ios微信客户端的无效的bug. 参考自:http://blog.csdn.net/xuexiiphone/article/details/51966342

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}【网站名称】` });

Keywords

vue

vue-router

document title

FAQs

What is vue-document-title-plugin?

Is vue-document-title-plugin well maintained?

Package last updated on 23 Feb 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install