Vue简易博客总结

项目结构：

首先，编写博客的导航栏组件BlogHeader.vue:

 1 <template>
 2     <nav>
 3         <ul>
 4             <li>
 5                 <router-link to="/" exact>博客</router-link>
 6                 <router-link to="/add" exact>写博客</router-link>
 7             </li>
 8         </ul>
 9     </nav>
10 
11 </template>
12 
13 <script>
14     export default{
15         name:"blog-header"
16     }
17 
18 </script>
19 
20 <style scoped>
21     ul{
22         list-style-type: none;
23         text-align: center;
24         margin: 0px;
25     }
26 
27     li{
28         display: inline-block;
29         margin: 0 10px;
30     }
31 
32     a{
33         color: #fff;
34         text-decoration: none;
35         padding: 12px;
36         border-radius: 5px;
37     }
38 
39     nav{
40         background: crimson;
41         padding: 30px 0;
42         margin:10px;
43     }
44 
45     .router-link-active{
46         background: rgba(255,255,255,0.8);
47         color: #444;
48     }
49 
50 </style>

View Code