我目前正在使用Vue JS,并且未使用任何路由器。 我没有使用独立构建,而是想与webpack一起实现并将其与.vue扩展一起使用。 寻找更好的方法来使用变量渲染Vue模板。 例如 :

// App.Vue
var Loading = {
   template: `<div>Loading...</div>`
}

// main.js
var currentView = Loading;

new Vue({
  el: "#app",
  render(h) {
    return h(currentView);
  }
});

上面的示例可以正常工作,没有任何问题。 想了解是否有更好的处理方法。

假设currentView是否包含类似

currentView = "Loading"

render(h) {
  return h(eval(currentView)); // works
  return h([currentView]); // template not found or mount error 
}

我们如何在将值传递给render函数之前将其替换为模板?

提前致谢。

#1楼 票数:0

h是Vue的createElement用于创建虚拟Dom元素。 与用于创建实际Dom元素的浏览器的createElement相同。 因此,它仅适用于虚拟Dom而不适用于字符串。 如果要第二个示例工作,则必须注册一个名为“ Loading”的组件。

var Loading = {
   template: `<div>Loading...</div>`
}

// main.js
var currentView = "Loading";

new Vue({
  el: "#app",
  render(h) {
    return h(currentView);
  },
  components: {
     Loading: Loading //register Loading component as "Loading"
  }
});

或将其注册为全局加载组件

Vue.component("Loading", Loading);

  ask by Phanikiran translate from so

未解决问题?本站智能推荐:

1回复

带渲染模板的Vue路由器

我是使用vue js的初学者。 我在网站上尝试了vue路由器进行导航。 一切顺利进行。 但是我有一个问题,当导航需要模板来显示页面相对应时。 实际上,我希望通过分割文件来整齐地组织我的脚本。 如生根本身,.html本身等,这是我的脚本: Route.js 在这种情况下,实
1回复

Vue路由器Navigation Guard动态导入

我想将数据从组件文件动态导入到路由器文件,并根据导入数据的值允许next() 。 在App.vue中,当数据经过authenticated: false时,我会触发this.$router.push({name: "Dashboard"}) authenticated: false更改为true
1回复

具有vue的多个路由器

我正在运行一个PHP应用程序,其中需要一些页面才能完全交换视图。 我需要一个成熟的路由器,因为我需要利用历史记录模式API。 使用Vue路由器执行以下操作非常容易: 在PHP中,我像这样简单地加载路由器,并将PHP生成的后端数据传递给两个视图: 这适用于一个页面,但是如果
1回复

Vue 路由器动态参数

我无法弄清楚传递动态参数数据的正确语法。 我尝试了几种变体,但我认为我可以通过以下方式注入 someValue: 但是,我不断收到编译器错误。
1回复

Vue 路由器 beforeEnter 与 beforeEach

我试图将未登录的用户从所有页面重定向到/login 。 我试过beforeEach()但是当用户使用像/home 、 /event这样的直接 url 输入站点时它不会触发。 Per-Route Guard beforeEnter()工作得很好,因为一旦用户登陆该特定页面,它就会触发。 但是,它要
1回复

Vue路由器更改当前路由的查询

我有一个 URL,我正在使用此代码附加属性参数: 当我第二次调用该方法时,参数会再次添加。 但是如果已经有属性参数,我希望它更新而不是添加另一个时间。 任何帮助都受到高度赞赏。
2回复

Vue路由器没有路由到指定位置

我将 vue 与 vue-router 一起使用,路由到子路由时路由不起作用。 以编程方式路由到 /user/profile
1回复

防止Vue路由器中的路由更改

我正在尝试创建一些将在其中包含图像的链接。 我正在尝试使内部div在不触发路线更改的情况下做某事,我如何能够实现这一目标? 我已经尝试过事件修改后的v-on:click.stop ,但是它似乎不起作用,单击.inner-div后,路由仍然会更改。 在此先感谢您的帮助。