vue.js的路由配置
vue.js
- 招聘管理
-
- 企业管理的页面优化
- 招聘管理的页面优化
- 文章管理
- 路由vue-router
-
- 初始化工程
- 页面逻辑结构分析
- 自定义路由
- 动态路由
- 嵌套路由
招聘管理
企业管理的页面优化
对话框
<el-dialog title="编辑" :visible.sync="dialogFormVisible">
<el-form label-width="80px">
<el-form-item label="企业名称"><el-input v-model="pojo.name" style="width:500px;">el-input>el-form-item>
<el-form-item label="企业简介">
<el-input v-model="pojo.summary" style="width:500px;"
type="textarea" :rows="3">el-input>
el-form-item>
<el-form-item label="企业地址"><el-input v-model="pojo.address" style="width:500px;">el-input>el-form-item>
<el-form-item label="标签列表"><el-input v-model="pojo.labels" style="width:500px;">el-input>el-form-item>
<el-form-item label="坐标"><el-input v-model="pojo.coordinate" style="width:500px;">el-input>el-form-item>
<el-form-item label="是否热门">
<el-switch
v-model="pojo.ishot"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0">
el-switch>
el-form-item>
<el-form-item label="LOGO">
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon">i>
el-upload>
el-form-item>
<el-form-item label="职位数"><el-input v-model="pojo.jobcount" style="width:500px;">el-input>el-form-item>
<el-form-item label="URL">
<el-input v-model="pojo.url" style="width:500px;">
<template slot="prepend">http://template>
el-input>
el-form-item>
el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSave()">保存el-button>
<el-button @click="dialogFormVisible = false" >关闭el-button>
div>
el-dialog>
图片上传的js
//图片上传的js
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
this.pojo.logo = this.imageUrl;
},
beforeAvatarUpload(file) {
const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png'); //图片格式是否为jpg
const isLt2M = file.size / 1024 / 1024 < 2; //图片大小是否小于2M
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
招聘管理的页面优化
对话框
<el-dialog title="编辑" :visible.sync="dialogFormVisible">
<el-form label-width="80px">
<el-form-item label="职位名称"><el-input v-model="pojo.jobname" style="width:500px;">el-input>el-form-item>
<el-form-item label="薪资范围"><el-input v-model="pojo.salary" style="width:500px;">el-input>el-form-item>
<el-form-item label="经验要求"><el-input v-model="pojo.condition" style="width:500px;">el-input>el-form-item>
<el-form-item label="学历要求"><el-input v-model="pojo.education" style="width:500px;">el-input>el-form-item>
<el-form-item label="任职方式">
<el-radio v-model="pojo.type" label="1">全职el-radio>
<el-radio v-model="pojo.type" label="2">兼职el-radio>
el-form-item>
<el-form-item label="办公地址"><el-input v-model="pojo.address" style="width:500px;">el-input>el-form-item>
<el-form-item label="企业ID">
<el-select v-model="pojo.eid" filterable placeholder="请选择">
<el-option
v-for="item in enterpriseData"
:key="item.id"
:label="item.name"
:value="item.id">
el-option>
el-select>
el-form-item>
<el-form-item label="状态">
<el-switch
v-model="pojo.state"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0">
el-switch>
el-form-item>
<el-form-item label="网址"><el-input v-model="pojo.url" style="width:500px;">el-input>el-form-item>
el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSave()">保存el-button>
<el-button @click="dialogFormVisible = false" >关闭el-button>
div>
el-dialog>
其中有获取企业列表的js，省略
文章管理
使用富文本编辑器来显示文章
使用v-html标签
<el-dialog title="文章审核" :visible.sync="dialogFormVisible">
<h3>标题h3>
{
{pojo.title}}
<hr>
<h3>正文h3>
<div v-html="pojo.content">div>
<br>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="examine()">审核通过el-button>
<el-button @click="dialogFormVisible = false" >关闭el-button>
div>
el-dialog>
路由vue-router
初始化工程
首先构建一个新的vue工程
一、全局安装vue-cli
npm install -g vue-cli
二、创建一个基于webpack模板的新项目
vue init webpack vue-router-demo
三、使用vscode打开文件夹，运行
npm run dev
页面逻辑结构分析
main.js：vue的核心配置
App.vue：声明布局，其中
router/index.js：路由配置
自定义路由
一、配置两个路由router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import List from '@/components/List'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/list',
name: 'List',
component: List
},
{
path: '/about',
name: 'About',
component: about
}
]
})
二、编写两个vue页面
三、配置布局App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<hr>
<a href="#/list">新闻a>
<a href="#/about">关于我们a>
<router-link to="/list">新闻router-link>
<router-link to="/about">关于我们router-link>
<router-view/>
div>
template>
<script>
export default {
name: 'App'
}
script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
style>
动态路由
根据地址参数来跳转页面
一、首先配置上面的新闻页面，添加新闻1-3
<template>
<div>
新闻列表<br>
<router-link to="/item/1">新闻1router-link><br>
<router-link to="/item/2">新闻2router-link><br>
<router-link to="/item/3">新闻3router-link><br>
div>
template>
<script>
export default {
}
script>
<style>
style>
二、定义路由，在路由中添加地址参数
语法:参数名
import Item from '@/components/Item'
//描述地址参数
//语法 :参数名
{
path: '/item/:id',
name: 'Item',
component: Item
}
三、配置vue页面
使用内置对象$route，$route.params 获取所有地址参数
<template>
<div>新闻详情={
{$route.params.id}}div>
template>
<script>
export default {
}
script>
<style>
style>
嵌套路由
嵌套路由：对子页面的布局进行定义
点击关于我们时，上面不变，下面变
一、配置About.vue：和app.vue一样，让他需要变的部分添加上
<template>
<div>
关于我们<br>
<hr>
<router-link to="/about/linkman">联系人router-link>
<router-link to="/about/address">联系地址router-link>
<hr>
<router-view/>
div>
template>
二、配置嵌套路由
{
path: '/about',
name: 'About',
component: About,
children:[
{
path: 'linkman',
name: 'Linkman',
component: Linkman,
},
{
path: 'address',
name: 'Address',
component: Address,
}
]
},
三、页面配置
略
