单页面，顾名思义，就是整个项目只有一个页面，但是可以展示不同的内容。那在vue中它是如何实现单页面的？
我先画一下它的流程路线，index.html----main.js---app.vue---router.js----xxx.vue,接下来我们具体跑一下这条路线。
1. 项目构建成功后，在public目录下有个index.html,这个页面就是整个项目唯一的页面，也是浏览器访问的唯一页面，我们先看一下它里面的内容：
<!--浏览器访问的唯一页面（单页面应用SPA）-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body style="margin: 0px; padding: 0px">
<!--如果浏览器不支持scrip时，就展示这段话-->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!--这个APP被main.js里面的APP所代替-->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2. 其中核心就是 <div id="app"></div>，页面所有内容都在这个div中，那如何将内容放到这div中的呢？接下来就要引入main.js，也就是项目的唯一入口，我们先看一下它里面的内容：
/*项目的唯一入口，相当于main函数*/
import Vue from 'vue'
/*引入app.vue组件*/
import App from './App.vue'
import router from './router'
new Vue({
router,
store,
/* APP就是要渲染的组件*/
render: h => h(App)
/* $mount('#app')：挂载到#APP这里（index。HTML里面）*/
}).$mount('#app')
srender: h => h(App)，是要渲染的APP.vue组件，
$mount('#app')是将app.vue组件挂载到index.html中
3.main.js相当于的中间件，用于连接index.html和app.vue,那么app.vue又是什么，接下来我们先看一下它里面的内容：
<template> <div id="app"> <!-- <router-view/>相当于占位符，它对应到router里面的index。js 当你的请求路径是哪个，它对应的就是哪个组件也就是哪个。vue文件--> <router-view/> </div> </template>
4.里面这个div就是main.js中 import App from './App.vue'。main.js所渲染的也是就是这个div中的内容，但div中只有<router-view/>，那么他是什么意思呢？通俗一点来说，他就是一个占位符，它对应到router里面的index.js当你的请求路径是哪个，它对应的就是哪个组件，也就是哪个.vue文件,也就会展示不同的内容。那么router里面的index.js里面又有什么内容呢？
import Vue from 'vue'
import VueRouter from 'vue-router'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/test1',
name: '一',
component: Test1
} ,
{
path: '/test2',
name: '二',
component: Test2
}
]
const router = new VueRouter({
routes
})
export default router
5.从代码可以看出，当我们在浏览的请求路径是 index.html/test1 时，就会加载Test1.vue这个组件，也就会展示它里面的内容。同样的，请求路径是 index.html/test2 时，就会加载Test2.vue这个组件.
那么Test1.vue这个组件里面的内容应该怎么写呢，其实很简单，我们先看一下：
<template> <div>test1</div> </template> <script> export default { name: "Test1", /* data 用于定义属性*/ /*用return的意思是只在当前组件有效 不使用return包裹的数据会在项目的全局可见，会造成变量污染 使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件 * */ data() { return {
} }, /* methods 用于定义的函数，可以通过 return 来返回函数值。*/ methods: { } } </script> <style scoped> </style>
<!--组件的定义用.vue文件
包含三部分：template：定义HTML元素
script：定义点击事件，数据的动态处理
style：定义样式-->
至此，一个完整的线路就算走完了，是不是有点绕，感觉一层一层的，我们再来梳理一下。这次，我们反着来：
xx.vue组件--------router里面的index.html，引入.vue文件，并定义他们的请求路径。--------------app.vue，将<router-view/>替换成我们请求
路径的那个xx.vue组件------------main.js中引入app.vue,渲染它，并把他挂载到
index.html中-------------index.html，浏览器访问。