vuejs에서 제목을 설정하는 방법

vuejs에서 제목을 설정하는 방법: 1. npm 설치를 통해 "vue-wechat-title"을 설치합니다. 2. main.js에 "vue-wechat-title"을 도입합니다. 3. index.js에 각 경로를 추가합니다.

이 문서의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6, Dell G3 컴퓨터.

vuejs에서 제목을 설정하는 방법은 무엇입니까?

vue 단일 페이지 제목 설정 제목

Vue, React 등의 프런트엔드 프레임워크는 단일 페이지 애플리케이션이며 웹 전체 사이트는 실제로 인덱스 페이지이며, 페이지 이동은 index.html의 콘텐츠를 대체합니다. 이는 각 페이지에 제목 태그를 설정하는 기존 방식과 다릅니다. Vue、React 等都是单页面的应用，整个web站点其实是一个index页面，页面跳转都是替换index.html里边的内容。这与传统的每个页面设置title标签的做法不一样。

推荐使用 vue-wechat-title

vue-wechat-title作用

Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)

已测试APP
微信
QQ
支付宝
淘宝

安装

npm install vue-wechat-title --save

用法

1，在 main.js 中引入

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

2，在路由文件 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，在 app.vue 中修改 router-view

vue-wechat-title 사용을 권장합니다

vue-wechat-title 기능

Vuejs 단일 페이지 애플리케이션 iOS 시스템의 일부 앱 웹뷰에서 , 제목이 문서를 통과할 수 없습니다. 이 문제를 해결하려면 플러그인을 xxx로 수정하세요(Android와 호환 가능)

테스트된 앱
WeChat
QQ
Alipay
Taobao

설치

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

사용법

1에서 main.js에 도입됨 라우팅 파일-indexjs-의 각 경로에

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

2를 추가하고 라우팅 파일 index.js의 각 경로에 title을 추가합니다. > rrreee

3, app.vue에서 router-view를 수정합니다. > 구성 요소 rrreee🎜의 사용자 정의 로드 이미지의 기본 주소는 ./favicon.ico이며 상대 주소 또는 절대 주소일 수 있습니다. 🎜rrreee🎜ok! 다시 시작하고 살펴보세요🎜🎜추천 학습: "🎜vue tutorial🎜"🎜🎜🎜

위 내용은 vuejs에서 제목을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!