Pingchas 发表于 2024-3-29 12:30:00

Vue2 Layout布局

vue create web

src/layout/conpoments/index.js

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


src/layout/conpoments/headerBar.vue

<template>
    <div class="header-pc">
      <div class="container">
            <ul>
                <li :class="this.$route.path=='/'?'active':''"><a href="/">Home</a></li>
                <li :class="this.$route.path=='/store'?'active':''"><a href="/store">Merchant-side</a></li>
                <li :class="this.$route.path=='/delivery'?'active':''"><a href="/delivery">Delivery-side</a></li>
                <li :class="this.$route.path=='/about'?'active':''"><a href="/about">About US</a></li>
            </ul>
            <a class="app-down" href="/app">APP下载</a>
      </div>
    </div>
</template>

<script>
export default{
    methods:{
      
    },
    mounted () {
    console.log('---------------->mounted')
    console.log(this.$route)
},
}
</script>

<style>
.header-pc {
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    background: #f3f3f3;
    background-image: linear-gradient(-180deg, #fefefe, #f3f3f3);
}
.header-pc ul li.active a, .header-pc ul li a:hover {
    color: #19a0f5;
}
.header-pc ul li.active a:after {
    content: "";
    position: absolute;
    margin-left: -3px;
    top: 30px;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #19a0f5;
}
.header-pc .app-down {
    float: right;
    margin-top: 14px;
    padding: 8px 27px;
    text-decoration: none;
    color: #fff;
    background: #24a5f5;
    background-image: linear-gradient(-180deg, #5dbbf5, #24a5f5);
    border: 1px solid #2da6f1;
    border-radius: 4px;
}
.container {
    margin: 0 auto;
    width: 1200px;
    box-sizing: border-box;
    height: 60px;
}
ul,ul li{
    display: inline-block;
}
ul li a{
    position: relative;
    color: #989a9c;
    margin: 20px;
    display: inherit;
    margin-top: 20px;
}
</style>

src/layout/conpoments/main.vue
<template>
    <router-view/>
</template>

<script>
</script>

src/layout/layout.vue
<template>
    <div>
      <HeaderBar></HeaderBar>
      <Main></Main>
    </div>
</template>

<script>
import { HeaderBar,Main } from './components'
export default{
    components:{
      HeaderBar,
      Main
    }

}
</script>

src/route/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../layout/layout'
import App from '../views/app'
import About from '../views/about'
import Store from '../views/store'
import Delivery from '../views/delivery'
import Home from '../views/home'
Vue.use(VueRouter)

const routes = [
{
    path: '/',
    component: Layout,
    children:[
      {
      path: '',
      name: 'index',
      component: Home
      },
      {
      path: '/app',
      name: 'app',
      component: App
      },
      {
      path: '/about',
      name: 'about',
      component: About
      },
      {
      path: '/store',
      name: 'store',
      component: Store
      },
      {
      path: '/delivery',
      name: 'delivery',
      component: Delivery
      }
    ]
}
]

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})

export default router

运行效果

H.U.C清风 发表于 2024-3-30 09:52:55

谢谢分享，已回复。

alglsf666 发表于 2024-4-6 13:23:33

谢谢分享。
页: [1]
查看完整版本: Vue2 Layout布局