踩坑#1

Posted 2021-11-29 zly430

记录一下今天遇到的坑

-------------子路由

• 由于Vue是单页面加载模，所以当做的网站具有多个不同页面的时候，我会第一时间想到用子路由，这样做的好处是，由于大部分页面的头尾都是一样的，无需再引进来，直接在中间的内容区进行渲染。
• 但是一定要在做之前考虑好，比如背景色，头和尾，哪些是不变的样式，哪些做成组件引入。因为的原因，今天踩到了很多坑。
• 最后复制了一个首页出来，把内容挖掉，只留头和尾还有背景色。好在头和尾是做成了组件的形式引入的，所以不算麻烦。然后另一个首页把头和尾去掉，只留内容
• 这里做个记录

<template>
  <!-- 由于做成了子路由，这个index做为了背景来使用，所以去掉了内容部分 -->
  <div class="index">
    <!-- 由于所有内容都是居中的，所以把颜色做成背景在index页 -->
    <div class="topBg">
      <!-- 为了解决背景色问题，颜色都放在index里了 -->
      <div class="navbarBg"></div>
      <Header></Header>
      <router-view></router-view>把渲染放在了这里，这样子路由的内容就会在头和尾不变的中间内容层进行更新渲染

      <bottom></bottom>
    </div>

  </div>
</template>

• 配置完后，不要忘了把放了主页内容的子路由设置为默认显示的组件。

path: '/',
      name: 'Index',
      component: r => require.ensure([], () => r(require('@/index')), 'web_1'),
      redirect: '/index1',===  只要加上这句，rediect：后面的路径就是默认显示的子路由
      children: [
        {
          path: '/index1',
          // 真正的首页
          component: r =>
            require.ensure([], () => r(require('../index1.vue')), 'web_1')
        },