js中如何添加 html.partial,可以在Vue 2路由器中包含html“部分”模板（未嵌入js）吗？(Possible to include an html “partial” templat...-CSDN博客

可以在Vue 2路由器中包含html“部分”模板(未嵌入js)吗？(Possible to include an html “partial” template (not embedded in js) in Vue 2 router?)

我知道我可以这样做：

const Foo = {

template:

bar

}

const routes = [

{ path: '/foo', component: Foo }

]

但我宁愿包含一个html文件，如：

const routes = [

{ path: '/foo', component: {template: require('foo.html')} }

]

...没有使用Webpack，Browserfy或类似的东西(我试图保持简单)。

I know I can do this:

const Foo = {

template:

bar

}

const routes = [

{ path: '/foo', component: Foo }

]

But I'd rather somehow include an html file like:

const routes = [

{ path: '/foo', component: {template: require('foo.html')} }

]

...WITHOUT using Webpack, Browserfy or anything like that (I'm trying to keep things simple).

原文：https://stackoverflow.com/questions/42868260

更新时间：2020-08-06 14:08

最满意答案

创建者Evan You在这里解释了为什么他不想使用templateURL https://vuejs.org/2015/10/28/why-no-template-url 。所以，没有你想要的东西是不可能的。现在，SSR确实提供了一些以您所谈论的方式构建应用程序的机会。特别是如果你使用像nuxt.js这样的东西，这仍然包括构建步骤。

The creator Evan You explains here why he didn't want to use templateURLs https://vuejs.org/2015/10/28/why-no-template-url. So, no what you want isn't possible. Now SSR does give some opportunities to structure your app in the way you are talking about. Especially if you are using something like nuxt.js however, this still includes build steps.

相关问答

看起来问题是Cordova.js不包含在浏览器中，您需要在物理设备上进行测试。这并不意味着你不能在浏览器中进行原型设计。在JS中，如果cordova已加载，将定义window.cordova 。所以你可以像这样设置你的初始化 if(window.cordova){

//add deviceready event to start app

} else {

//call starting function

}

对于需要物理设备的东西：振动，加速度计等，你必须构建和部署到设备，浏览器本

...

您正在使用const app = new Vue({)} ，这会创建一个新的vue实例那么你正在使用$mount() ，它接受一个元素选择器作为参数。 $mount()所做的是，它会手动将vue实例挂载到作为参数传递的关联DOM元素在您的代码中，只有nav元素具有app的id，这意味着只有nav元素被挂载到vue实例而不是nav元素的nav元素。这就是为什么你的回答addimg一个id为app的包装器的原因，因为现在router-view也与vue实例相关联。你可以参考： vm。$ mou

...

您将创建下列菜肴的商店 const store = new Vuex.Store({

state: {

dishes: [

{

name: '',

quanity: ''

}

]

getters: {

getAllDishes: state => state.dishes,

getDishByName: (state) => (name) => {

return state.dishes

...

如果您坚持使用VueRouter@2.0.0或更低版本：你期望的name不是作为道具传递的，而是作为一个路线参数传递的。动态路由匹配。您需要从模板中访问它，如下所示： $route.params.name 。您也可以使用计算值。如果你可以更新VueRouter 正如另一个答案中所述，根据VueRouter@2.2.0的发布说明，只有在v2.2.0中引入了传递路径参数作为道具时，您使用的是v2.0.0。如果你想使用道具，你需要更新到(至少)v2.2.0。 If you're stick

...

如果要在Vue中导入和使用库而无需重新声明使用Vue原型： Vue.prototype.$moment = require('moment')

然后在你的组件内： method: {

action () {

let date = this.$moment()

}

您可以在此处阅读有关实例属性的更多信息： https://vuejs.org/v2/cookbook/adding-instance-properties.html If you want to import an

...

我建立了一个最小的测试项目，并成功实现了我的目标。最终的结果是一些具有不兼容版本的Node包，以及不需要的包。我修剪了我的packages.json文件，然后重新安装了所需的vue ， vue-router和laravel-elixir-vueify软件包，以确保所有内容都正确安装并具有正确的依赖关系。 I set up a minimal test project and managed to successfully achieve what I was aiming for. The e

...

您可以使用块的名称将第三个参数传递给require.ensure函数。 You can pass a third parameter to the require.ensure function with the name of the chunk.

您在beforeEach方法中使用的功能是导航警卫。导航卫士接收3个参数： to ， from和next 。从导航卫士文档：确保始终调用下一个函数，否则挂钩永远不会被解析。在这里，您只需滚动页面的顶部，但挂钩永远不会解析，因此路由器会在滚动后停止。写下你的功能： router.beforeEach(function (to, from, next) {

window.scrollTo(0, 0);

next();

});

它应该工作。 The function you

...

假设你有正确的组件，你仍然需要一个小的更新。将vue路由器作为模块系统加载时，应使用以下方式初始化应用程序： new Vue({

el: '#app',

router,

render: h => h(App)

});

Assuming you have the components properly, you still need a small update. When loading vue router as module system, the application

...