vue app基本路由配置

一.vue基本路由配置
　　1.删除原来的配置

　　2.新建页面

　　

 

 　2. views页面，首页的代码

<template>
  <div class="box">
    <header class="header">首页</header>
    <div class="content">首页</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">

</style>

3. app.页面

<template>
    <div class="container">
    <router-view></router-view> //页面容器
    <router-view name="footer"></router-view>//底部容器，可以用命名路由叫底部显示或者不显示
    </div>
</template>

<script>

export default {
    
}
</script>

<style  lang="scss">
// 导入重置样式库的scss文件，其内部导入了别的scss文件
@import '@/lib/reset.scss';
// 如果企业有自己的scss库，使用企业自己的，没有可以选用这个
// 查看lib/classes.scss文件，内含各个函数的使用
// 1rem 100px
html, body, .container {
  @include rect(100%, 100%); // width: 100%; height: 100%;
}
.container {
  @include flexbox(); // display: flex;的兼容写法
  @include flex-direction(column); // flex-direction: column;的兼容写法
  .box {
    @include flex(); // flex: 1;的兼容写法
    @include rect(100%, auto);
    @include flexbox();
    @include flex-direction(column);
    .header {
      @include rect(100%, 0.44rem);
      @include background-color(#f66);
    }
    .content {
      @include flex();
      @include rect(100%, auto);
    }
  }
  .footer {
    @include rect(100%, 0.5rem);
    @include background-color(#efefef);
    ul {
      @include rect(100%, 100%);
      @include flexbox();
      li {
        @include flex();
        // 内部元素水平垂直居中
        @include flexbox();
        @include flex-direction(column);
        @include justify-content();
        @include align-items();
        span {
          @include font-size(0.24rem);
        }
        p {
          // @include color(#333);
          @include font-size(0.12rem);
          @include margin(-3px 0 0 0);
        }
      }
    }
  }
}
</style>

4. components里面的 footer.vue自定义组件

<template>
  <footer class="footer">
    <ul>
      <!-- router-link默认被渲染为a标签，使用tag标签生成需要的标签 -->
      <router-link to="/home" tag="li">
        <!-- <span class="iconfont icon-fonts-shouye"></span> -->
        <p>首页</p>
      </router-link>
      <router-link to="/classify" tag="li">
        <!-- <span class="iconfont icon-icon"></span> -->
        <p>分类</p>
      </router-link>
      <router-link to="/shop" tag="li">
        <!-- <span class="iconfont icon-gouwuche"></span> -->
        <p>购物车</p>
      </router-link>
      <router-link to="/my" tag="li">
        <!-- <span class="iconfont icon-wode"></span> -->
        <p>我的</p>
      </router-link>
    </ul>
  </footer>
</template>

<style lang="scss">
@import '@/lib/reset.scss';
.footer {
  ul {
    li {
      &.router-link-exact-active.router-link-active {
        @include text-color(#f66);
      }
    }
  }
}
</style>

5.router配置路由   

 footer: Footer 页面需要底部切换就写，不需要就不写

import Vue from 'vue'
import VueRouter from 'vue-router'
import Footer from '@/components/Footer'

Vue.use(VueRouter)
// 路由的懒加载
const routes = [
  { // 重定向
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home', // 命名路由，可以用于声明式导航传参
    components: {
      default: () => import('@/views/home/index.vue'),
      footer: Footer 
    }
  },
  {
    path: '/classify',
    name: 'classify', // 命名路由，可以用于声明式导航传参
    components: {
      default: () => import('@/views/classify/index.vue'),
      footer: Footer
    }
  },
  {
    path: '/shop',
    name: 'shop', // 命名路由，可以用于声明式导航传参
    components: {
      default: () => import('@/views/shop/index.vue'),
      footer: Footer
    }
  },
  {
    path: '/my',
    name: 'my', // 命名路由，可以用于声明式导航传参
    components: {
      default: () => import('@/views/my/index.vue'),
      footer: Footer
    }
  }
]

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

export default router