我是Vue的新手并试图观察它的范例，我查看了页面，做了示例并与Angular，MVC等进行了比较，我非常方便。
我的方案如下。静态登陆 index.html 页面上有一个导航栏。在它下面，为我的视图应用程序标记了一个名为 #vapp 的div。当用户点击不同的菜单时，我希望div vapp 重新填充：
我的方法是将 vapp.data 的值更改为对应于视图中所需的值（使该字段成为我的viewmodel，种类）。但是，我有点卡在路由部分。我是否应该在点击事件中将HTML呈现为Vue？
也许我受到了Angular的影响，但是我自发地希望在一个单独的HTML文件中看到一个模板，该模板通过管道（推送，渲染 - 无论正确的命名是什么）进入我的 vapp的一部分 div while 同时让它能够访问（并且最好是绑定）Vue对象的 data 字段中提供的数据。
这是合适的方法吗？或者Vue背后的范例是为每个呈现的“页面”创建和维护一个新的Vue对象吗？
答案 0 :(得分：1)
康拉德， 我想你正在寻找vue-router。 https://router.vuejs.org/en/
您的导航栏中包含<router-link>个
然后一个<router-view>将替换为routes
vapp为<router-view>。
每个视图都是单独的VUE文件（组件）。
最好使用webpack-vue-template开发不仅仅是简单的组件。如果你想要路由等，你肯定应该使用webpack模板。 https://github.com/vuejs-templates/webpack
答案 1 :(得分：1)
我从未使用角度，但在Vue中，您可以使用single file components和vue-router来实施SPA。
方法是让一个页面为所有组件提供服务，每个组件本身可以由多个组件组成。首先，你设置一个像这样的路由器：
local function envIsAlphaNum(sIn)
return (string.match(sIn,"[^%w]") == nil) end
然后在你的// import top level components
import Foo from './foo.js'
import Bar from './bar.js'
// Define routes, each route serves up a component
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// Create a router
const router = new VueRouter({
routes
})
// Mount it to your div
const app = new Vue({
router
}).$mount('#app')
中执行：
HTML现在，当点击这些链接时，vue将提供<div id="app">
<!-- links you registered earlier -->
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- All content will be served up here -->
<router-view></router-view>
</div>
和Foo。
对于提供数据，单个文件组件中的每个组件都是自包含的，因此您将与该组件相关的模板，样式和视图模型（数据）放在一个文件中：
Bar这些需要使用<template>
<div>
{{message}}
<my-component></my-component>
</div>
</template>
<script>
// import components to be used in this component
import myComponent from './myComponent'
export default{
// register imported components
components: {
myComponent
},
data(){
return {
message: 'Foo'
}
}
}
</script>
或webpack等编译。
基本上最后，当用户导航时，路由器会提供一堆自包含的组件，每个组件都包含它需要运行的所有组件。