Bagaimana untuk menetapkan tajuk dalam vuejs

Cara untuk menetapkan tajuk dalam vuejs: 1. Pasang "vue-wechat-title" melalui pemasangan npm 2. Perkenalkan "vue-wechat-title" dalam main.js; Hanya tambahkan tajuk pada setiap laluan.

Persekitaran pengendalian artikel ini: sistem Windows 7, versi Vue 2.9.6, komputer Dell G3.

Bagaimana untuk menetapkan tajuk dalam vuejs?

tajuk tetapan tajuk halaman tunggal vue

Rangka kerja bahagian hadapan seperti Vue、React ialah aplikasi satu halaman Keseluruhan tapak web sebenarnya adalah halaman indeks, dan lompatan halaman menggantikan kandungan dalam index.html. Ini berbeza daripada amalan tradisional menetapkan tag tajuk pada setiap halaman.

Adalah disyorkan untuk menggunakan vue-wechat-title

fungsi vue-wechat-title

Aplikasi satu halaman Vuejs tidak boleh melepasi tajuk dalam paparan web beberapa APP di bawah sistem iOS Pemalam ini hanya direka untuk menyelesaikan masalah ini dengan mengubah suai document.title = xxx (serasi dengan Android)

APP Diuji
WeChat
QQ
Alipay
Taobao

Pemasangan

npm install vue-wechat-title --save

Penggunaan

1, perkenalkan main.js

import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)

2 dalam

, tambah setiap laluan dalam penghalaan fail index.js title

// 挂载路由const router =  new Router({
   mode: 'history',
   routes:[
        {
          path: '/',
          name: 'Index',
          component: Index,
          meta: {
            title: '首页'   // 标题设置
          }
        },
        {
          path: '/lists',
          name: 'Lists',
          component: Lists,
          meta: {
            title: '列表'  // 标题设置
          }
        }
     ]
});

3, ubah suai komponen app.vue dalam router-view

<router-view v-wechat-title=&#39;$route.meta.title&#39;></router-view>

Alamat lalai bagi imej yang dimuatkan tersuai ialah ./favicon. ico, yang boleh menjadi relatif atau Sama sekali

<p v-wechat-title="$route.meta.title" img-set="/static/logo.png"></p>

ok! Mulakan semula dan lihat

Kajian yang disyorkan: "tutorial vue"

Atas ialah kandungan terperinci Bagaimana untuk menetapkan tajuk dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!