SPA单页应用

一个vue的单页应用(一级路由)的脚手架程序构建
1.进入某个目录如D:\VueStudy
2.通过命令创建项目:vue init webpack vue-router-demol(后几项都选N)
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类



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

运行结果:


3.png
4.png

可以调首页和消息的颜色,没有下划线,并且点的时候有颜色

a {
text-decoration: none;
color: antiquewhite;
}a:hover{
text-decoration: none;
color: #2C3E50
}

你可能感兴趣的:(SPA单页应用)