根據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的自定義指令 <div v-title>{{htmltitle}}</div> ... 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