vue配置路由以及设置路径简写
发布时间:2020-12-16 23:09:08 所属栏目:百科 来源:网络整理
导读:1、关于路径简写:@是一个简写,指代src目录 设置简写的文件 build/webpack.base.config.js ? ? 2、我们也可以自己给常用的目录添加简写 ? ? 3、在 src/main.js 中给主页添加index.scss样式,使用简写的路径表示 ? ? 4、配置路由 src/app.vue template div i
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)"> } ] }) ? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读