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屋！