vue+element
这里我引入了自己写的头部模板
目录结构 我的vue版本是2.9
路由是在src/router
先要引入模板
import Login from '@/views/Login/Login'
import Category from '@/views/Category/Category'
在写路径
这里的name可以放在:to这些中{Login} 进行跳转
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login/Login'
import Category from '@/views/Category/Category'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path:'/index',
name:'index',
component:Category
}
// {
// path:'/login/:id',
// name:"login",
// props:true,
// /**
// * props:(route)=>({id:route.query.b}),
// * 另一个固定传值:
// * props:{
// * id:"111"
// * }
// */
// component:Login
// }
]
})
Vue代码
这里菜单栏 Header 是引入 然后用components激活 在使用
<template>
<div>
<el-row>
<el-col :span="4"><Header></Header></el-col>
<h1>添加分类</h1>
<el-col :span="8"><el-input v-model="category" placeholder="请输入内容"></el-input></el-col>
<el-button type="primary" round @click="addCategory">添加分类</el-button>
</el-row>
</div>
</template>
<script>
import Header from "../public/Header"
export default {
components:{
Header
},
data(){
return{
category:""
}
},
methods:{
addCategory(){
console.log(1);
this.$ajax.get("/admin/addCategory?categoey=11").then(function(res){
//成功之后处理逻辑
var result=res;
console.log(res);
},function(res){
var result=res;
console.log(res);
})
}
}
}
</script>
头部模板
<template>
<div>
<el-container class="main">
<el-aside :width="tabWidth+'px'">
<div>
<div class="isClossTab" @click="isClossTabFun">
</div>
<el-menu :class="'menu'" default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">分类管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1" >添加分类</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
</div>
</el-aside>
</el-container>
</div>
</template>
<script>
import { setTimeout } from 'timers';
export default {
data() {
return {
isCollapse: false,
tabWidth: 200,
test1: 1,
intelval: null,
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
}
}
</script>
<style scoped lang="scss">
$header-height:60px;
$background-color: #545c64;
$color: #FFF;
.main {
height: 100vh;
min-width: 800px;
min-height: 600px;
overflow: hidden;
aside{ overflow: visible;
height: 100%;
background-color: $background-color;
color: $color;
.isClossTab{ width: 100%;
height: $header-height;
cursor: pointer;
font-size: 25px;
text-align: center;
line-height: $header-height;
font-weight: bold;
border-right: 1px solid #807c7c;
box-sizing: border-box;
}
.menu {
width: 100%;
border-right: 0;
}
}
.main-header {
background-color: $background-color;
color: $color;
.el-dropdown{ cursor: pointer;
float: right;
}
.el-dropdown-link {
img{ $imgMargin: (($header-height - 50)/2);
display: inline-block;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #FFF;
margin-top: $imgMargin;
} } }
.crumbs {
margin-bottom: 20px;
}
.main-footer {
text-align: center;
background-color: $background-color;
color: $color;
line-height: 50px;
} } </style>
然后是axios
axios跨域的设置 和引入
在main.js下进行设置
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
Vue.prototype.$ajax = axios
// Vue.prototype.$ajax = axios
Vue.config.productionTip = false
// axios 配置
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
// axios.defaults.headers.post['Content-Type'] = 'json';
// axios.defaults.baseURL = 'http://localhost:8080/项目名/';
axios.defaults.baseURL = 'http://localhost:8080/';
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
然后直接点击进行传值
methods:{
addCategory(){
console.log(1);
this.$ajax.get("/admin/addCategory?categoey=11").then(function(res){
//成功之后处理逻辑
var result=res;
console.log(res);
},function(res){
var result=res;
console.log(res);
})
}
}