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)
},
]
})

  • 运行结果

    image
    image

你可能感兴趣的:(spa单页)