设为首页收藏本站
查看: 5237|回复: 3

[前端开发] Vue2 Layout布局

[复制链接]
Pingchas
  • TA的每日心情
    奋斗
    14 小时前

    • 签到天数: 927 天

    [LV.10]以坛为家III
    发表于 2024-3-29 12:30:00 | 显示全部楼层 |阅读模式
    1. vue create web
    复制代码


    src/layout/conpoments/index.js

    2. export { default as HeaderBar} from './headerBar.vue'
    3. export { default as Main} from './main.vue'
    复制代码


    src/layout/conpoments/headerBar.vue

    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>

    16. <script>
    17. export default{
    18.     methods:{
    19.         
    20.     },
    21.     mounted () {
    22.     console.log('---------------->mounted')
    23.     console.log(this.$route)
    24.   },
    25. }
    26. </script>

    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>

    5. <script>
    6. </script>
    复制代码


    src/layout/layout.vue
    1. <template>
    2.     <div>
    3.         <HeaderBar></HeaderBar>
    4.         <Main></Main>
    5.     </div>
    6. </template>

    8. <script>
    9. import { HeaderBar,Main } from './components'
    10. export default{
    11.     components:{
    12.         HeaderBar,
    13.         Main
    14.     }

    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)

    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. ]

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

    51. export default router
    复制代码


    运行效果

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有帐号？注册

    x

    点评

    H.U.C清风
    正好最近在学前端。  发表于 2024-4-1 08:28
    回复

    使用道具 举报

    H.U.C清风
  • TA的每日心情
    开心
    5 天前

    • 签到天数: 575 天

    [LV.9]以坛为家II
    发表于 2024-3-30 09:52:55 | 显示全部楼层
    谢谢分享，已回复。
    回复 支持 反对

    使用道具 举报

    返回列表
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    红盟社区--红客联盟 

    Processed in 0.058494 second(s), 23 queries.

    站点统计| 举报| Archiver| 手机版| 黑屋 |   

    备案号：冀ICP备20006029号-1 Powered by HUC © 2001-2021 Comsenz Inc.

    首页

    资讯

    社区

    互助

    家园

    群组

    文库

    文图

    组织活动

    总排行榜

    个人日志

    音乐电台

    爱心赞助

    每日签到

    微信机器

    微信图片

    手机扫我进入移动触屏客户端

    关注我们可获取更多热点资讯

    Honor accompaniments. theme macfee

    快速回复 返回顶部 返回列表