欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue配置路由以及设置路径简写

程序员文章站 2022-04-15 21:57:34
1、关于路径简写:@是一个简写,指代src目录 设置简写的文件 build/webpack.base.config.js 2、我们也可以自己给常用的目录添加简写 3、在 src/main.js 中给主页添加index.scss样式,使用简写的路径表示 4、配置路由 src/app.vue

1、关于路径简写:@是一个简写,指代src目录

设置简写的文件 build/webpack.base.config.js

vue配置路由以及设置路径简写

 

 

2、我们也可以自己给常用的目录添加简写

vue配置路由以及设置路径简写

 

 

3、在 src/main.js 中给主页添加index.scss样式,使用简写的路径表示

vue配置路由以及设置路径简写

 

 

4、配置路由

src/app.vue

<template>
  <div id="app" class="g-container">
    <div class="g-header-container">
      头部导航
    </div>
    <div class="g-view-container">
      <!-- 一级路由切换 -->
      <router-view></router-view>    
    </div>
    <div class="g-footer-container">
      <tabbar />
    </div>
  </div>
</template>

<script>
  import tabbar from 'components/tabbar';

  export default {
    name: 'app',
    components:{
      tabbar
    }
  }
</script>

<style scoped>
  .g-container{
    position: relative;
    width:100%;
    height:100%;
    max-width:640px;
    min-width:320px;
    margin:0 auto;
    overflow:hidden;  
  }
  .g-header-container{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    z-index:999;
    height:64px;
    background:pink; 
  }
  .g-view-container{
    height:100%;
    padding-bottom:50px;
    background:lightblue;
    overflow:auto;
  }
  .content{
    height:2000px;
  }
  .g-footer-container{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    box-shadow:0 0 10px 0 hsla(0,6%,58%,0.6);
    height:50px;
    z-index:999;
    background:lightgreen;
  }
</style>

 

src/pages/home/index.vue

<template>
    <div class="home">
        <slider/>
        <!-- 该页面自己的子路由 -->
        <router-view></router-view>
    </div>

</template>

<script>
import slider from 'components/slider';

export default {
    name:"home",
    components:{
        slider
    }
}
</script>

 

src/pages/product/index.vue

<template>
    <div class="product">
        product
    </div>
</template>

<script>
export default {
   name:"product"
}
</script>

<style lang="scss" scoped>
    .product{
        overflow:hidden;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:#fff;
        z-index:1200;
    }
</style>

 

router/index.js

import vue from 'vue'
import router from 'vue-router'
import home from 'pages/home'
import product from 'pages/product'

vue.use(router)

export default new router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: home,
      children:[//二级路由
        {
        name: 'home-product',
        path: 'product/:id',
        component: product
        }
      ]
    },
    {//其他路径全部统一跳转到首页
      path: '*',
      redirect: '/home'
    }
  ]
})

 

效果图

vue配置路由以及设置路径简写

 

5、当页面比较多的时候,直接显示可能有时并不太理想,可以考虑使用按需加载

修改router/index.js

import vue from 'vue'
import router from 'vue-router'

vue.use(router)

export default new router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: ()=>import('pages/home'),//使用import动态引入,实现按需加载导航
      children:[//二级路由
        {
        name: 'home-product',
        path: 'product/:id',
        component: ()=>import('pages/product')
        }
      ]
    },
    {//其他路径全部统一跳转到首页
      path: '*',
      redirect: '/home'
    }
  ]
})