vue开发 - 根据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:‘个人中心‘
}
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
在入口文件 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}
})
---------------------
作者:、不知不觉、
来源:CSDN
原文:https://blog.csdn.net/u010394015/article/details/79132591
版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/itgezhu/p/10884467.html

时间: 2024-10-28 04:43:03

vue开发 - 根据vue-router的meta动态设置html里标签的内容的相关文章

在代码中动态设置android里View的边距

有时候需要动态设置某个View的位置,如果在布局文件中写则其布局已定. 这时可以通过在代码中根据不同的需要增加判断后,在设定边距等. 如下. 需要说下,setMargins() 方法.其括号中的四个参数依次对应的方位为-- 左,上,右,下. 左即指View的左边距. 代码来自mtk android 源码. 在代码中动态设置android里View的边距

每天一点点之vue框架开发 - 数据渲染-for循环中动态设置页面背景色

实现方式很简单,在属性前加:,表示绑定 :style="{'background':item.bgColor} 代码样例: <li v-for="item in laber_cloud"> <router-link :style="{'background':item.bgColor}" >{{item.name}}</router-link> </li> 原文地址:https://www.cnblogs.c

[vue开发记录]vue仿ios原生datepicker实现

先上个效果图 现在只开发了年月,还在优化. 在网上看了一个纯原生js实现实现惯性滚动和回弹的文章  地址:https://www.cnblogs.com/ranyonsue/p/8119155.html. 于是改造成vue的scroll组件,然后派发scroll-end 滚动结束事件 和 on-scroll正在滚动事件, 传入滚动的Y值. 最后基于scroll组件调整位置,开发出示例图上的datepicker, 功能比较简单, 等优化后再传上代码 原文地址:https://www.cnblogs

【前端vue开发】vue开发watch检测的使用

<span style="color:#006600;"><div id="app"> <input type="text" v-model:value="childrens.name" /> <input type="text" v-model:value="lastName" /> </div> <script typ

动态设置ScrollView里面的ListView的高度

思路:循环取得listview中的Item的高度,把所有Item高度累加,就是Listview的高度. 1 public static void setListViewHeightBasedOnChildren(ListView listView) { 2 if (listView == null) 3 return; 4 ListAdapter listAdapter = listView.getAdapter(); 5 if (listAdapter == null) { 6 return;

移动端应该如何动态设置字体大小?

rem由来:font size of the root element,那么rem是个单位,单位大小由它第一代老祖宗的font-size的大小决定.现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康,因为不仅要知道rem是个单位,更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB. 事故造成原因:1.px单位在PC上很流行,在手机屏幕上一看,MLGB的,同样的12px却小的跟蚂蚁似的.2.好不容易在iPhone4上调的正常了,换个菊花牌手机,MBD不堪入目了.3.知道

vue开发后台管理系统小结

最近工作需要用vue开发了后台管理系统,由于是第一次开发后台管理系统,中间也遇到了一些坑,想在这里做个总结,也算是对于自己工作的一个肯定.我们金融性质的网站所以就不将代码贴出来哈 一.项目概述 首先工作需求是这样的,开发一个公司的总后台,包含各个不同的模块,总体难度一般,没有开发ui图,用的vue-cli .elementui框架.webpack打包. 总需求的思维导图见链接  http://naotu.baidu.com/file/e8c31b43dfb2f18a3c523e0fa1393c0

【转】[总结]vue开发常见知识点及问题资料整理(持续更新)

1.(webpack)vue-cli构建的项目如何设置每个页面的title 2.vue项目中使用axios上传图片等文件 3.qs.stringify() 和JSON.stringify()的区别以及在vux中使用post提交表单数据需要qs库序列化 4.vue中实现全局的setCookie,getCookie以及delCookie方法笔记 5.webpack中alias配置中的"@"是什么意思? 6.webpack proxyTable 代理跨域 7.如何在 vue 项目里正确地引用

Vue开发之基础路由

1.router-link和router-view组件 src/App.vie文件内容: <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> &