hwdglasses home page push

最新推荐文章于 2022-01-14 20:38:14 发布

lvlemo

最新推荐文章于 2022-01-14 20:38:14 发布

阅读量226

点赞数

分类专栏： vuejs

本文链接：https://blog.csdn.net/lvlemo/article/details/78467608

版权

vuejs 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

1.创建 listvc.vue

<template>
    <div class="listBox">
       test-view
    </div>
</template>

<script>
     export default{}
</script>

<style scoped>
    .listBox{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rebeccapurple;
      z-index: 100;
}
</style>

2.配置路由 index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../../src/components/Home/home.vue'
import ListVC from '../../src/components/Home/listvc.vue'
Vue.use(Router)

const routers = new Router({
  routes: [
    {
      path: '/home',
      name: 'homeModule',
      meta:{title:'首页'},
      component: Home,
      children:[
        {
          name:'listModule',
          path:'/listvc',
          component:ListVC,
        }
      ]
    },
    {
      path: '*',
      redirect: '/home'
    }
  ]
})

export default routers;

3.home.vue

<template>
    <div class="homeContainer">
      <k-slider :banners="sliders" :swiperOption="swiperOption"></k-slider>
      <k-glasess @glassesClick="glassesClick"></k-glasess>
      <k-recommend :recommendArray="recommends"></k-recommend>
      <k-hot-sell :productsArray="products"></k-hot-sell>
      //需要用routeview承载子路由
      <router-view></router-view>
    </div>
</template>

methods:{
    glassesClick:function (ID,title) {
       // push  
      this.$router.push({
          name:'listModule',
          params:{ID:ID,title:title},
        })
    }
},

导航

<div class="listnav">
  <img @click="backAction" class="back" src="https://img-blog.csdn.net/20171107133347623">
  <span class="titleA">标题</span>
</div>

methods:{
  backAction:function () {
    //返回导航控制器
    this.$router.back()
  }
}

//导航
.listnav{
  height: 64px;
  width: 100%;
  background: white;
  text-align: center;
}
//返回
.listnav img{
  width: 15px;
  height: 25px;
  position: absolute;
  left: 16px;
  top: 25px;
}
//标题
.listnav span{
  display: inline-block;
  font-size: 16px;
  height: 44px;
  line-height: 44px;
  color: black;
  margin-top: 20px;
}