Vue2 Layout布局

Pingchas

1. vue create web

复制代码

src/layout/conpoments/index.js

1. 
   
2. export { default as HeaderBar} from './headerBar.vue'
   
3. export { default as Main} from './main.vue'
   

复制代码

src/layout/conpoments/headerBar.vue

1. 
   
2. <template>
   
3.     <div class="header-pc">
   
4.         <div class="container">
   
5.             <ul>
   
6.                 <li :class="this.$route.path=='/'?'active':''"><a href="/">Home</a></li>
   
7.                 <li :class="this.$route.path=='/store'?'active':''"><a href="/store">Merchant-side</a></li>
   
8.                 <li :class="this.$route.path=='/delivery'?'active':''"><a href="/delivery">Delivery-side</a></li>
   
9.                 <li :class="this.$route.path=='/about'?'active':''"><a href="/about">About US</a></li>
   
10.             </ul>
    
11.             <a class="app-down" href="/app">APP下载</a>
    
12.         </div>
    
13.     </div>
    
14. </template>
    
15. 
    
16. <script>
    
17. export default{
    
18.     methods:{
    
19.         
    
20.     },
    
21.     mounted () {
    
22.     console.log('---------------->mounted')
    
23.     console.log(this.$route)
    
24.   },
    
25. }
    
26. </script>
    
27. 
    
28. <style>
    
29. .header-pc {
    
30.     font-size: 14px;
    
31.     line-height: 20px;
    
32.     overflow: hidden;
    
33.     box-shadow: 0 0 10px rgba(0,0,0,.3);
    
34.     background: #f3f3f3;
    
35.     background-image: linear-gradient(-180deg, #fefefe, #f3f3f3);
    
36. }
    
37. .header-pc ul li.active a, .header-pc ul li a:hover {
    
38.     color: #19a0f5;
    
39. }
    
40. .header-pc ul li.active a:after {
    
41.     content: "";
    
42.     position: absolute;
    
43.     margin-left: -3px;
    
44.     top: 30px;
    
45.     left: 50%;
    
46.     width: 6px;
    
47.     height: 6px;
    
48.     border-radius: 50%;
    
49.     background: #19a0f5;
    
50. }
    
51. .header-pc .app-down {
    
52.     float: right;
    
53.     margin-top: 14px;
    
54.     padding: 8px 27px;
    
55.     text-decoration: none;
    
56.     color: #fff;
    
57.     background: #24a5f5;
    
58.     background-image: linear-gradient(-180deg, #5dbbf5, #24a5f5);
    
59.     border: 1px solid #2da6f1;
    
60.     border-radius: 4px;
    
61. }
    
62. .container {
    
63.     margin: 0 auto;
    
64.     width: 1200px;
    
65.     box-sizing: border-box;
    
66.     height: 60px;
    
67. }
    
68. ul,ul li{
    
69.     display: inline-block;
    
70. }
    
71. ul li a{
    
72.     position: relative;
    
73.     color: #989a9c;
    
74.     margin: 20px;
    
75.     display: inherit;
    
76.     margin-top: 20px;
    
77. }
    
78. </style>
    

复制代码

src/layout/conpoments/main.vue

1. <template>
   
2.     <router-view/>
   
3. </template>
   
4. 
   
5. <script>
   
6. </script>

复制代码

src/layout/layout.vue

1. <template>
   
2.     <div>
   
3.         <HeaderBar></HeaderBar>
   
4.         <Main></Main>
   
5.     </div>
   
6. </template>
   
7. 
   
8. <script>
   
9. import { HeaderBar,Main } from './components'
   
10. export default{
    
11.     components:{
    
12.         HeaderBar,
    
13.         Main
    
14.     }
    
15. 
    
16. }
    
17. </script>

复制代码

src/route/index.js

1. import Vue from 'vue'
   
2. import VueRouter from 'vue-router'
   
3. import Layout from '../layout/layout'
   
4. import App from '../views/app'
   
5. import About from '../views/about'
   
6. import Store from '../views/store'
   
7. import Delivery from '../views/delivery'
   
8. import Home from '../views/home'
   
9. Vue.use(VueRouter)
   
10. 
    
11. const routes = [
    
12.   {
    
13.     path: '/',
    
14.     component: Layout,
    
15.     children:[
    
16.       {
    
17.         path: '',
    
18.         name: 'index',
    
19.         component: Home
    
20.       },
    
21.       {
    
22.         path: '/app',
    
23.         name: 'app',
    
24.         component: App
    
25.       },
    
26.       {
    
27.         path: '/about',
    
28.         name: 'about',
    
29.         component: About
    
30.       },
    
31.       {
    
32.         path: '/store',
    
33.         name: 'store',
    
34.         component: Store
    
35.       },
    
36.       {
    
37.         path: '/delivery',
    
38.         name: 'delivery',
    
39.         component: Delivery
    
40.       }
    
41.     ]
    
42.   }
    
43. ]
    
44. 
    
45. const router = new VueRouter({
    
46.   mode: 'history',
    
47.   base: process.env.BASE_URL,
    
48.   routes
    
49. })
    
50. 
    
51. export default router

复制代码

运行效果

H.U.C清风

谢谢分享，已回复。

alglsf666

谢谢分享。