1、关于路径简写:@是一个简写,指代src目录
设置简写的文件 build/webpack.base.config.js
2、我们也可以自己给常用的目录添加简写
3、在 src/main.js 中给主页添加index.scss样式,使用简写的路径表示
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-; bottom:0; 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 { name:"Home"<template> <div class="product"> product </div> </template> <script> export { 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-product'其他路径全部统一跳转到首页 path: '*' } ] })
效果图
5、当页面比较多的时候,直接显示可能有时并不太理想,可以考虑使用按需加载
修改router/index.js
import Vue from 'vue'使用import动态引入,实现按需加载导航 children:[) } ] },1)"> } ] })
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。