vue.js - Vue单页面应用 换肤功能的实现,求思路
本文介绍了vue.js - Vue单页面应用 换肤功能的实现,求思路的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我们有一个类似个人主页的页面 需要加载不同的模板,来实现页面风格的切换。
比如个人主页的地址是这样的: www.xxx.com/space/uid0000010101
地址是固定不变的。
我们在后端返回的数据里有用户设置好的模板名字。比如 /get_space_info
返回{template:'bluesky'}
那么根据返回的template加载对应的模板和css即可。 但是Vue好像没有动态指定模板路径的功能。
首先想到的是使用Render 函数, JSX 语法。
render (h) {
return (
<div
// normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
类似这样,但是也不好维护模板的HTML。
请教大神有没有最佳方案。
解决方案
如果是同一套html,只是更换css的话,是可以动态更换类名的。
如果是想更换组件的话,这里有http://www.cnblogs.com/-ding/...
这篇关于vue.js - Vue单页面应用 换肤功能的实现,求思路的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文