This commit is contained in:
gaoshuaixing
2020-12-17 19:15:14 +08:00
parent f03a4b1de6
commit 4de3a4aca8
7 changed files with 184 additions and 4 deletions

View File

@@ -0,0 +1,26 @@
/**
* 基础路由
* @type { *[] }
*/
export const constantRouterMap = [
// {
// path: '/test',
// redirect: '/testa',
// hidden: true,
// children: [
// {
// path: '/testa',
// name: 'testa',
// component: { template: '<div>foo</div>' }
// },
// {
// path: '/testb',
// name: 'testb',
// component: () => import(/* webpackChunkName: "user" */ '../views/Contentb')
// }
// ]
// },
{ path: '/testa', component: () => import('@/views/Contenta') },
{ path: '/testb', component: () => import('@/views/Contentb') }
]

View File

@@ -2,11 +2,13 @@ import Vue from 'vue';
import antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './App';
import router from './router';
Vue.use(antd);
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App),
}).$mount('#app');

View File

@@ -0,0 +1,29 @@
import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap } from '@/config/router.config'
// hack router push callback
const originalPush = Router.prototype.push
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 Foo = { template: '<div>foo</div>' }
// const Bar = { template: '<div>bar</div>' }
// const constantRouterMap = [
// { path: '/testa', component: Foo },
// { path: '/testb', component: Bar }
// ]
// const constantRouterMap = [
// { path: '/testb', component: () => import('@/views/Contentb') }
// ]
export default new Router({
mode: 'history',
routes: constantRouterMap
})

View File

@@ -0,0 +1,58 @@
<template>
<div class="hello">
<h1>11111</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View File

@@ -0,0 +1,58 @@
<template>
<div class="hello">
<h1>2222</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View File

@@ -17,13 +17,15 @@
>
<a-menu class="sub-menu-item" theme="light" mode="inline" v-model="subMenuKey" :default-selected-keys="subMenuKey">
<a-menu-item :key="subIndex" v-for="(menuInfo, subIndex) in subMenu">
<span class="nav-text">{{ menuInfo.title }}</span>
<router-link :to="{ path: menuInfo.page }">
<span>{{ menuInfo.title }}</span>
</router-link>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout-content :style="{ margin: '24px 16px 0' }">
<div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
content
<router-view />
</div>
</a-layout-content>
</a-layout>
@@ -52,11 +54,11 @@ export default {
'menu_1' : {
'subMenu_1' : {
title: 'home菜单1',
page: ''
page: '/testa'
},
'subMenu_2' : {
title: 'home菜单2',
page: ''
page: '/testb'
},
},
'menu_2' : {

5
frontend/vue.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
//Solution For Issue:You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
//zhengkai.blog.csdn.net
runtimeCompiler: true
}