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类
消息
{{ msg }}
- 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)
},
]
})
-
运行结果
imageimage
。