导航路由配置（下拉固定定位，二级路由跳转）

Views文件下TypeList.vue代码示例：

module.exports = {
    publicPath:"/",
    outputDir:"dist",
    indexPath:"index.html",
    pages:{
        index:{
            entry:'src/main.js',
            // 来源的模板
            template:"public/index.html",
            fileName:'dist/index.html',
            title:'shopping'
        }
    },
    devServer:{
        // 启用压缩,压缩之后 代码所占的空间比较小了，
        compress:true,
        port:9000,
        host:"0.0.0.0",
        hot:true,
        open:true,
        proxy:{
            "/myApi":{
                target:baseURL+"/api", // 接口地址
                changeOrigin:true,
                pathRewrite:{
                    "^/myApi":""
                }
            }
        }
    }
}

Components文件下oneTypeNav.vue代码：

  <div class="one-box">
      <router-link v-for="(item,i) in urls" :key="i" :to="`/typeList/${item}`">{{item}}</router-link>
  </div>
</template>

<script>
import {oneTypeNav} from "../tools/ajax.js"
export default {
    data(){
        return{
            urls:[]
        }
    },
     created() {    
         oneTypeNav().then(res=>{
             this.urls = res.splice(0,9)
         })
     },
}
</script>

<style scoped>
    .one-box{
        display: flex;
        justify-content: space-between;
        width: 1200px;
        margin: auto;
        position: relative;
        padding:10px;
        top: -10px;
    }
    a{
        text-decoration: none;
        color: #666;
        display: inline-block;
        padding: 10px 30px;
        border-radius: 5px;
        transition: all 0.2s;

    }
     a:hover,.router-link-exact-active{
        background: purple;
        color: whitesmoke;
    }
</style>

Components文件下GoodList代码：

  <div class="goods-box">
    <router-link
      :to="`/detail?gId=${good.Id}`"
      v-for="(good, i) in list"
      :key="i"
    >
      //拼接字符串'"/detail?gId="+good.Id'
      <img v-lazy="good.imageUrl" alt="" />
      <h4 class="title">{{ good.title }}</h4>
      <p>
        <span class="price">￥{{ good.priceStr }}</span>
        <span class="mack" v-html="good.mack"></span>
      </p>
    </router-link>
  </div>
</template>

<script>
export default {
  props: ["list"],
};
</script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
<style scoped>
.goods-box {
  width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goods-box::after {
  content: "";
  flex: 1;
}
a {
  width: 200px;
  height: 220px;
  border: 1px solid lightgray;
  box-sizing: border-box;
  margin-top: 20px;
  margin-left: 20px;
  text-decoration: none;
}
img {
  width: 160px;
  height: 160px;
}
.price {
  text-align: left;
  float: left;
  position: relative;
  top: 10px;
  color: red;
}
.mack {
  float: right;
  position: relative;
  top: 10px;
}
.title {
  text-align: left;
  color: black;
  font-size: 15px;
  position: relative;
  left: 5px;
}
.mack >>> span {
  padding: 5px;
}
</style>