后端WebAPI准备
https://router.vuejs.org/zh/guide/
https://v3.router.vuejs.org/zh/installation.html
路由
<template> <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> <!-- <el-table-column prop="date" label="日期" width="180"> </el-table-column> --> <el-table-column prop="id" label="ID" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template> <style> .el-table .warning-row { background: oldlace; } .el-table .success-row { background: #f0f9eb; } </style> <script> export default { methods: { tableRowClassName({row, rowIndex}) { if (rowIndex === 1) { return 'warning-row'; } else if (rowIndex === 3) { return 'success-row'; } return ''; } }, created:function(){ this.$add.get("/test").then((response)=>{ this.tableData = response.data; }) }, data() { return { tableData: [] } }, } </script>
Vue Router安装与使用vue路由wue- router是官方的路由插件,能够轻松的管理SPA项目中组件的切换
Vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。
Vue-router目前有3x的版本和4x的版本,
Vue-router3x只能结合vue2进行使用
安装npm install vue-router@3
Vue-router4x只能结合Vue3进行使用
安装npm install vue-router@4
import VueRouter from 'vue-router' import Vue from 'vue' import helloworld from '@/components/HelloWorld.vue' import data from '@/components/demo.vue' //VueRouter设置为Vue的插件 Vue.use(VueRouter) new VueRouter({ //指定对应属性与组件关系 routes: [ { path: '/helloworld', component: helloworld}, { path: '/data', component: data} ] }) export default router
全局引入
import router from './router/router'
启动
npm run serve
子路由
bn.vue
<template> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </template>
import VueRouter from 'vue-router' import Vue from 'vue' import helloworld from '../components/HelloWorld.vue' import data from '../components/demo.vue' import bn1 from '../components/bn.vue' import bn2 from '../components/bn.vue' //VueRouter设置为Vue的插件 Vue.use(VueRouter) const router = new VueRouter({ //指定对应属性与组件关系 routes: [ { path: '/', redirect : "/data"},//重定向 { path: '/helloworld', component: helloworld}, { path: '/data', component: data}, //通过children属性，嵌套子路由 { path: '/data', component : data, children: [ { path: 'bn1', component: bn1 }, ] }, //子路由，方式二 { path: '/data/bn2', component: bn2}, ] }) export default router
子路由方式一
子路由方式二
动态路由
前端页面
<br> <router-link to="/helloworld/1">1</router-link> <br> <router-link to="/helloworld/2">2</router-link>
Js对应关系
{ path: '/helloworld/:id', component: helloworld,props : true},//动态路由 //动态路由2 { path: '/helloworld/:id', component: helloworld,props : true, children: [ { path: ':id', component: helloworld }, ] },
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
而传统的多页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
Element-ui设计原则
一致性 Consistency
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
反馈 Feedback
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
效率 Efficiency
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
可控 Controllability
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
