我从未使用过 Angular，但在 Vue 中，您可以使用 single file components 和 vue-router 来实现 SPA。
方法是让一个页面为您的所有组件提供服务，并且每个组件本身可以由多个组件组成。所以首先你像这样设置一个路由器：
// 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 中执行以下操作：
<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>
现在，当点击这些链接时，vue 将提供 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 或browserify 之类的东西编译。
最终，当用户导航时，路由器会为您提供一堆自包含的组件，每个组件都包含它运行所需的所有组件。