一個vue的單頁應(yīng)用（一級路由）的腳手架程序構(gòu)建
1.進入某個目錄如D：\VueStudy
2.通過命令創(chuàng)建項目：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類
<template>
<div id="app" class="container">
<div class="header">
<router-link to="/" class="nav-item">首頁</router-link>
<router-link to="/message" class="nav-item">消息</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
.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;
}
</style>
Index.vue類
<template>
<div class="container">
<h2>首頁</h2>
{{msg}}
</div>
</template>
<script>
export default{
name:'Index',
data(){
return{
msg:'首頁'
};
}
};
</script>
<style scoped>
</style>
Message類
<template>
<div class="container">
<h2>消息</h2>
{{ msg }}
</div>
</template>
<script>
export default {
name: 'Index',
data() {
return {
msg: '消息'
};
}
};
</script>
<style scoped></style>
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)
},
]
})
運行結(jié)果：
可以調(diào)首頁和消息的顏色,沒有下劃線，并且點的時候有顏色
a {
text-decoration: none;
color: antiquewhite;
}a:hover{
text-decoration: none;
color: #2C3E50
}
