Eighth|Eighth SPA单页应用（一级路由） EighthSPA单页应用（一级路由）

本例主要采用路由配置，实现上面导航不动，下面页面可跳转的功能

一个vue的单页应用（一级路由）的脚手架程序构建
1.命令行先进入某个目录如D:\VueStudy
2.创建项目: vue init webpack demo
3.进入demo目录安装依赖：npm install
4.修改config目录下index.js的dev端口为80
5.运行：npm run dev，打开http://localhost，看到Vue主页logo即成功

App.vue

.container{ width: 80%; margin: 0 auto; height: 400px; } .header{ display: flex; height: 100px; background-color: darkcyan; font-size: 20px; padding-left: 20px; align-items: center; } .nav-item{ margin-right: 20px; } .content{ background-color: #2c3e50; color: #ffffff; }

index.vue

Message.vue

index.js

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