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