8. SPA( 单页)

SPA，单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

详细步骤

一个Vue的单页应用(一级路由)的脚手架程序构建
1.进入 某个目录如D:\VueStudy
2.通过命令创建项目：vue init webpack vue-router-demo1
3.cd进入vue-router-demo1
4.安装依赖：npm install
5.运行？：npm run dev
6.更改config目录下的index.js文件，将端口改成80
7.进行一级路由配置

• App.vue
  router文件的index.js文件
• 新建
  1.Index.vue（components中）
  2.Message.vue（components中）
  修改index和APP.vue
• APP.vue类

• Message类

• index.vue类

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode:"history",
//使上面的/后面没有#号如：
routes: [
{
path: '/',
name: 'Index',
component: resolve=>require(['../components/Index.vue'],resolve)
},
{
path: '/message',
name: 'Message',
component: resolve=>require(['../components/Message.vue'],resolve)
},
]
})

• 运行结果

  
  
  

  01
  
  
  

  02