添加router

This commit is contained in:
Sky_ID 2022-05-23 15:50:35 +08:00
parent 419aad2304
commit 3e44355e45
3 changed files with 168 additions and 4 deletions

View File

@ -1,17 +1,16 @@
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<router-view/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>

View File

@ -2,6 +2,9 @@ import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import Axios from "axios";
Vue.prototype.$axios = Axios
Vue.config.productionTip = false
@ -9,5 +12,6 @@ Vue.use(ElementUI);
new Vue({
router,
render: h => h(App),
}).$mount('#app')

161
src/router/index.js Normal file
View File

@ -0,0 +1,161 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [
{
//TODO:404
path: '*',
component: () => import('../views/develop.vue'),
},
{
path: '/',
name: 'Home',
redirect: '/home',
},
{
path: '/dashboard',
name: 'Dashboard',
layout: "dashboard",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue'),
},
{
path: '/info',
name: '信息版',
layout: "dashboard",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "dashboard" */ '../views/Info-Page.vue'),
},
{
path: '/tables',
name: 'Tables',
layout: "dashboard",
component: () => import('../views/Tables.vue'),
},
{
path: '/billing',
name: 'Billing',
layout: "dashboard",
component: () => import('../views/Billing.vue'),
},
{
path: '/rtl',
name: 'RTL',
layout: "dashboard-rtl",
meta: {
layoutClass: 'dashboard-rtl',
},
component: () => import('../views/RTL.vue'),
},
{
path: '/Profile',
name: '个人主页',
layout: "dashboard",
meta: {
layoutClass: 'layout-profile',
},
component: () => import('../views/Profile.vue'),
},
{
path: '/sign-in',
name: 'Sign-In',
component: () => import('../views/Sign-In.vue'),
},
{
path: '/activeAccount',
name: 'ActiveAccount',
component: () => import('../views/ActiveAccount.vue'),
},
{
path: '/sign-up',
name: 'Sign-Up',
meta: {
layoutClass: 'layout-sign-up',
},
component: () => import('../views/Sign-Up.vue'),
},
{
path: '/reviewApply',
name: '申请成为审核员',
layout: 'dashboard',
component: () => import('../views/ReviewApply.vue'),
},
{
path: '/home',
name: 'Home',
meta: {
layoutClass: 'layout-home',
},
component: () => import('../views/Home.vue'),
},
{
path: '/caseDetails',
name: 'CaseDetails',
component: () => import('../views/CaseDetails.vue'),
},
{
path: '/infoList',
name: '案例信息',
layout: "dashboard",
component: () => import('../views/InfoList.vue'),
},
{
path: '/authManage',
name: '认证审核',
layout: "manage",
component: () => import('../views/AuthManage.vue'),
},
{
path: '/userManage',
name: '用户管理',
layout: "manage",
component: () => import('../views/UserManage.vue'),
},
{
path: '/searchResult',
name: '搜索结果',
layout: "dashboard",
component: () => import('../views/SearchResult.vue'),
},
{
path: '/casePost',
name: 'CasePost',
component: () => import('../views/CasePost.vue'),
},
]
// Adding layout property from each route to the meta
// object so it can be accessed later.
function addLayoutToRoute( route, parentLayout = "default" )
{
route.meta = route.meta || {} ;
route.meta.layout = route.layout || parentLayout ;
if( route.children )
{
route.children = route.children.map( ( childRoute ) => addLayoutToRoute( childRoute, route.meta.layout ) ) ;
}
return route ;
}
routes = routes.map( ( route ) => addLayoutToRoute( route ) ) ;
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
})
export default router