前端学习（1916）vue之电商管理系统电商系统之绘制面包屑导航和卡片视图

目录结构

router.js

import Vue from &＃39;vue&＃39;
import Router from &＃39;vue-router&＃39;
import Login from &＃39;./components/Login.vue&＃39;
import Home from &＃39;./components/Home.vue&＃39;
import Welcome from &＃39;./components/Welcome.vue&＃39;
import Users from &＃39;./components/user/Users.vue&＃39;
import Right from &＃39;./components/power/Right.vue&＃39;
Vue.use(Router)const router &＃61; new Router({routes: [{path: &＃39;/&＃39;,redirect: &＃39;/login&＃39;},{path: &＃39;/login&＃39;,component: Login},{path: &＃39;/home&＃39;,component: Home,redirect: &＃39;/welcome&＃39;,children: [{path: &＃39;/welcome&＃39;,component: Welcome}, {path: &＃39;/users&＃39;,component: Users},{path: &＃39;/rights&＃39;,component: Right}]}]
});
//挂载路由导航守卫
router.beforeEach((to, from, next) &＃61;> {if (to.path &＃61;&＃61;&＃61; &＃39;/login&＃39;) return next();//获取tokenconst tokenStr &＃61; window.sessionStorage.getItem(&＃39;token&＃39;)if (!tokenStr) return next(&＃39;/login&＃39;)next();
})export default router


login.vue

main.js

import Vue from &＃39;vue&＃39;
import App from &＃39;./App.vue&＃39;
import router from &＃39;./router&＃39;
import &＃39;./plugins/element.js&＃39;
//导入字体图标
import &＃39;./assets/fonts/iconfont.css&＃39;
Vue.config.productionTip &＃61; false
//导入全局样式
import &＃39;./assets/css/global.css&＃39;import axios from &＃39;axios&＃39;
Vue.prototype.$http&＃61;axios
axios.defaults.baseURL&＃61;"http://127.0.0.1:8888/api/private/v1/"
// 请求在到达服务器之前&＃xff0c;先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config &＃61;> {// console.log(config)// 为请求头对象&＃xff0c;添加token验证的Authorization字段config.headers.Authorization &＃61; window.sessionStorage.getItem(&＃39;token&＃39;)// 在最后必须 return configreturn config
})
Vue.config.productionTip&＃61;false;
new Vue({router,render: h &＃61;> h(App)
}).$mount(&＃39;#app&＃39;)


global.css

/* 全局样式 */
html,
body,
#app {height: 100%;margin: 0;padding: 0;}.el-breadcrumb {margin-bottom: 15px;font-size: 12px;
}.el-card {box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}.el-table {margin-top: 15px;font-size: 12px;
}.el-pagination {margin-top: 15px;
}


element.js

import Vue from &＃39;vue&＃39;//弹框提示
import {Message,Button,Form,FormItem,Input,Container,Header,Aside,Main,Menu,Submenu,MenuItemGroup,MenuItem,Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,Tooltip,Pagination
} from &＃39;element-ui&＃39;
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.prototype.$message &＃61; Message


Home.vue

import Vue from &＃39;vue&＃39;
import Router from &＃39;vue-router&＃39;
import Login from &＃39;./components/Login.vue&＃39;
import Home from &＃39;./components/Home.vue&＃39;
import Welcome from &＃39;./components/Welcome.vue&＃39;
import Users from &＃39;./components/user/Users.vue&＃39;
Vue.use(Router)const router &＃61; new Router({routes: [{path: &＃39;/&＃39;,redirect: &＃39;/login&＃39;},{path: &＃39;/login&＃39;,component: Login},{path: &＃39;/home&＃39;,component: Home,redirect: &＃39;/welcome&＃39;,children: [{path: &＃39;/welcome&＃39;,component: Welcome}, {path: &＃39;/users&＃39;,component: Users}]}]
});
//挂载路由导航守卫
router.beforeEach((to, from, next) &＃61;> {if (to.path &＃61;&＃61;&＃61; &＃39;/login&＃39;) return next();//获取tokenconst tokenStr &＃61; window.sessionStorage.getItem(&＃39;token&＃39;)if (!tokenStr) return next(&＃39;/login&＃39;)next();
})export default router


.prettierrc

{"semi":false,"singleQuote":true
}

eslintrc.js

module.exports &＃61; {root: true,env: {node: true},extends: [&＃39;plugin:vue/essential&＃39;,&＃39;&＃64;vue/standard&＃39;],parserOptions: {parser: &＃39;babel-eslint&＃39;},rules: {&＃39;no-console&＃39;: process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;production&＃39; ? &＃39;warn&＃39; : &＃39;off&＃39;,&＃39;no-debugger&＃39;: process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;production&＃39; ? &＃39;warn&＃39; : &＃39;off&＃39;,&＃39;space-before-function-paren&＃39;:0}
}


welcome.vue

Users.vue

Right.vue

运行结果