以下に、vue-router を使用して各ページのタイトルを設定する方法に関する記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。
基本的な環境構成: webpack + vue2.0 + vue-router +nodeJS
routerフォルダーの下にindex.jsファイルを入力します
最初に導入します:
import Vue from 'vue' import Router from 'vue-router'
次に、ルーティングアドレスで各ルートを構成します:
routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, { /* 修改昵称 */ path: '/modifyName/:nickName', name: 'modifyName', component: modifyName, meta: { title: '修改昵称' } }, { /* 商品详情 */ path: '/goodsDetail', name: 'goodsDetail', component: goodsDetail, meta: { title: '商品详情' } }, { /* Not Found 路由,必须是最后一个路由 */ path: '*', component: NotFound, meta: { title: '找不到页面' } } ]
各メタにページのタイトル名を設定し、最後にトラバースします
router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } next() })
このようにして、各VUEページにタイトルが追加されます
以上が皆さんの参考になれば幸いです。将来。 。
関連記事:
Vue.setを使用してVueにオブジェクト属性メソッドを動的に追加する
vue2.0ではdev-server.jsの下に設定メソッドがありません
Vueファイルで進行状況を実装する方法ドラッグ&アップロード機能
以上がvue-routerを使用して各ページのタイトルメソッドを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。