1. 程式人生 > >根據vue-router的meta動態設定html裡標籤的內容

根據vue-router的meta動態設定html裡標籤的內容

路由檔案 :router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import index '@/view/index'
import user from '@/view/user'
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: '/index',
            name: 'index',
            component: index,
            meta:{
                title:'首頁'
} }, { path: '/user', name: 'user', component: user, meta:{ title:'個人中心' } } ] })

在入口檔案 main.js中新增以下程式碼

import Vue from 'vue'
import App from './App'
import router from './router'
router.beforeEach((to, from, next) => {
    if
(to.meta.title) { document.title = to.meta.title } next() })
new Vue({ el: '#app', router, template: '<App/>', components: {App} })

相關推薦

根據vue-router的meta動態設定html標籤內容

路由檔案 :router/index.js import Vue from 'vue' import Router from 'vue-router' import index '@/view/i

Spark2.2+ES6.4.2(三十二):ES API之ndex的create(建立index時設定setting,並建立index後根據avro模板動態設定index的mapping)/update/delete/open/close

要想通過ES API對es的操作,必須獲取到TransportClient物件,讓後根據TransportClient獲取到IndicesAdminClient物件後,方可以根據IndicesAdminClient物件提供的方法對ES的index進行操作:create index,update inde

動態設定html的title

使用vue前端框架做,竟然丟棄了很多javascript和html的東西了。。動態設定title的方法: 1.使用vue的自定義指令 &lt;div v-title&gt;{{htmltitle}}&lt;/div&gt; ... directives: { titl

vue.js 動態設定樣式

控制多個樣式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試例項</title> <script src="https

VUE.js動態設定輸入框disabled屬性

需求背景 頁面從list列表展示,跳轉到新增和修改的時候,新增和修改用的是同一個頁面:add-or-update.vue。 修改的時候使用者的賬號不能修改,因此需要將賬號的輸入框屬性設定為"只讀"。 程式碼樣例 <el-input v-model="dataFor

js移動端自適應動態設定html的fontsize

JS設計移動端頁面時會遇到自適應問題,大多數都知道用rem來設定頁面的比例大小,下面就來說幾種常見的html中的fontsize設定方法: 1.使用flexible.js外掛庫。  淘寶就是利用這個來設定的。重點說下第二種方法; 2.以下是比較簡介的方法: $(

用jquery動態新增html任何標籤的自定義屬性

由於用到國際化,且使用jquery.numberformatter-1.1.3.js類庫。在對所有td做國際化時,發現有被重複國際化的現象。國際化方法如:i18_data("#testTable tr td","${i18("jquery-numberformatter.l

Android 根據圖片高度動態設定ViewPager高度

有圖片的地方,就有需求。 為什麼一個App有那麼多的Banner,這裡就不吐槽了。我們還是直接進主題,如何讓ViewPager自適應圖片的高度。 效果如下: 如何去改變ViewPager的高度,都知道用setLayoutParams,我們不清楚的是,在

動態獲取html頁面的內容,而且取當中的某塊元素的方法

var mod .ajax pos spa app sync lte index ??$.ajax({ url: "http://192.168.1.59:8888/app-tpl-webapp/tpl/design.html", async:f

vue - 根據vue-router的meta動態設置html裏title標簽內容

com 路由 屬性 個人中心 meta div 添加 app template 1、路由文件 :router/index.js 添加 meta屬性配置: import Vue from ‘vue‘ import Router from ‘vue-router‘ i

根據類型動態生成數據 html錨點使用 分頁 待完成

attack tle 請求 get ndarray pla anim pan 生成 { "sucess":"true", "list": [ { "id":1, "type":"common", "name":"moudule1"

HTML+CSS第五課:使用Dreamweaver工具製作網頁、詳細解讀HTML頭部標籤、網頁頭部標籤的SEO設定

知識點:Dreamweaver工具的使用、HTML頭部標籤解讀、網頁頭部標籤的SEO設定 1、Dreamweaver工具            Adobe Dreamweaver,簡稱“DW”,中文名稱 "夢想編織者",最初為美

根據html模板動態生成html

public class GeneratingHTML {     /**      * 讀取HTML檔案      *@param filePath      *@return

【前端】動態生成HTML以及a標籤不跳轉問題標記

bookmarksResults.innerHTML += '<div class="well">' + '<h3>' + name +

Vue學習(9)————————Vue路由,設定請求頭,動態路由(路由傳值,get傳值)

簡述 之前都是手動的網跟元件中引入其他元件(import),路由的作用就是讓他自動掛載元件組成介面  1.安裝  npm install vue-router  --save   / cnpm install vue-router&nbs

根據元素或裝置寬動態設定圖片高度】

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content=

Vue2.x-02根據條件動態設定下拉框、時間選擇器、文字框是否可編輯

文章目錄 概述 選擇器禁止選擇 date-picker禁止選擇 input禁止輸入 概述 我們這裡元件庫使用的iview元件庫 需求是:特定環節,資料只能檢視,不能修改。 (檢視頁面和新增複用的同一個子元件)。 因此

Vue動態設定title(MD.3)

2018-07-18夜晚22:30,漫島已經寫好一些頁面了,目前在等待登入註冊的介面。 專案中需要給不同的頁面設定title,首先查了一下網上有沒有相關外掛,哎,有!爽、 名稱叫做vue-wechat-title,使用方法非常簡單,具體如下: 1.先安裝外掛,命令列執行cnpm

微信小程式——獲取到px轉化為rpx(根據裝置寬高動態設定元素寬高)

在專案中需要給一個view標籤動態的設定高度 首先,先通過呼叫wx.getSystemInfo獲取裝置資訊 可以獲取的資訊如下圖 wx.getSystemInfo({ success: function(res) { console.log

html根據寬的百分比設定

最近在團隊中開發了一部分html頁面 有一個功能點,需要在一行展示三張圖片,每張圖片拉伸成正方形。 對於圖片的寬設定為33%就可以了,但是怎麼讓高度根據寬度變化呢?最初想到的是在頁面生成後使用js來獲取圖片寬,再根據這個獲取的寬設定圖片的高。 程式碼如下: $(funct