842a3eb0 by sunnie

提取layout,,统一代码风格,优化路由

1 parent 367c2519
import api from './index'
// axios
import request from '@/utils/request'
......
@import './variables.scss';
@import './mixin.scss';
html,
body
.app {
body .app {
color: #333333;
font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
background-color: $background-color;
}
.app-container{
padding-bottom:50px;
}
\ No newline at end of file
.app-container {
padding-bottom: 50px;
}
......
<template>
<div class="app-containter">
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
</div>
</template>
<script>
export default {
name: 'AppLayout'
}
</script>
......@@ -8,15 +8,14 @@ import App from './App.vue'
import router from './router'
import store from './store'
// 引入全局样式
import '@/assets/css/index.scss'
// 设置 js中可以访问 $cdn
import { $cdn } from '@/config'
Vue.prototype.$cdn = $cdn
// 全局引入按需引入UI库 vant
import '@/plugins/vant'
// 引入全局样式
import '@/assets/css/index.scss'
// 移动端适配
import 'lib-flexible/flexible.js'
......
import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap } from '@/config/router.config'
import { constantRouterMap } from './router.config.js'
// hack router push callback
const originalPush = Router.prototype.push
Router.prototype.push = function push (location, onResolve, onReject) {
Router.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
Vue.use(Router)
const createRouter = () => new Router({
mode: 'history',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
const createRouter = () =>
new Router({
mode: 'history',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter () {
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
......
......@@ -5,8 +5,7 @@
export const constantRouterMap = [
{
path: '/',
name: 'index',
component: () => import('@/layouts/AppLayout'),
component: () => import('@/views/layouts/index'),
redirect: '/home',
meta: {
title: '首页',
......@@ -14,27 +13,16 @@ export const constantRouterMap = [
},
children: [
{
path: '/',
component: () => import('@/layouts/TabBarLayout'),
redirect: '/home',
meta: {
title: '首页',
keepAlive: false
},
children: [
{
path: '/home',
name: 'Home',
component: () => import('@/views/home/index'),
meta: { title: '首页', keepAlive: false }
},
{
path: '/about',
name: 'About',
component: () => import('@/views/home/about'),
meta: { title: '关于我', keepAlive: false }
}
]
path: '/home',
name: 'Home',
component: () => import('@/views/home/index'),
meta: { title: '首页', keepAlive: false }
},
{
path: '/about',
name: 'About',
component: () => import('@/views/home/about'),
meta: { title: '关于我', keepAlive: false }
}
]
}
......
<!-- home -->
<template>
<div class="app-container">
<div class="about-container">
<div class="warpper">
<div class="list">
<div class="logo"></div>
......@@ -46,8 +46,8 @@ export default {
// 请求接口数据,仅作为展示,需要配置src->config下环境文件
const params = { user: 'sunnie' }
getUserInfo(params)
.then(() => {})
.catch(() => {})
.then(() => { })
.catch(() => { })
},
// Action 通过 store.dispatch 方法触发
doDispatch() {
......@@ -60,7 +60,7 @@ export default {
}
</script>
<style lang="scss" scoped>
.app-container {
.about-container {
background: #fff;
height: 100vh;
box-sizing: border-box;
......
<!-- home -->
<template>
<div class="app-container">
<div class="index-container">
<div class="warpper">
<h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span> VUE H5开发模板</span></h1>
<h2 class="demo-home__desc">
......@@ -39,13 +39,13 @@ export default {
computed: {},
mounted() {},
mounted() { },
methods: {}
}
</script>
<style lang="scss" scoped>
.app-container {
.index-container {
.warpper {
padding: 12px;
background: #fff;
......
<template>
<div class="tabbar-layout-containter">
<div class="tabbar-layout-content">
<div class="app-container">
<div class="layout-content">
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
</div>
<div class="tabbar-layout-footer">
<div class="layout-footer">
<TabBar :data="tabbars" @change="handleChange" />
</div>
</div>
......@@ -15,7 +15,7 @@
<script>
import TabBar from '@/components/TabBar'
export default {
name: 'TabBarLayout',
name: 'AppLayout',
data() {
return {
tabbars: [
......
......@@ -64,14 +64,13 @@ module.exports = {
// }
},
css: {
extract: IS_PROD,
extract: IS_PROD, //是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
sourceMap: false,
loaderOptions: {
scss: {
// 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
prependData: `
@import "assets/css/index.scss";
@import "assets/css/mixin.scss";
@import "assets/css/variables.scss";
$cdn: "${defaultSettings.$cdn}";
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!