路由规则 router/index.js
1.import 导入需要访问的 页面
2.path 对应页面定义访问路径 ,name可以随意取, component需要指定向 页面的 import名称, hidden 表示显示还是隐藏
import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue';
import page_add from '@/module/cms/page/page_add.vue';
import page_edit from '@/module/cms/page/page_edit.vue';
export default [{
path: '/',
component: Home,
name: 'CMS',
hidden: false,
children: [
{path: '/cms/page/list', name: '页面列表', component: page_list, hidden: false},
{path: '/cms/page/add', name: '新增页面', component: page_add, hidden: true},
{path: '/cms/page/edit/:pageId', name: '修改页面', component: page_edit, hidden: true
children:[""]},
]}]
2.scope.row
获取一列中 参数的值
<el-table-column label="编辑" width="80">
<template slot-scope="scope">
<el-button
size="small"type="primary"
@click="edit(scope.row.pageId)">编辑
</el-button>
</template>
</el-table-column>
3.create方法 初始化查询
mounted() {
//默认查询页面
this.query();
}
query() {
cmsApi.page_list(this.params.page, this.params.size, this.params).then((res) => {
this.total = res.queryResult.total;
this.list = res.queryResult.list
})}
export const page_list = (page,size,params) => {
//params为json格式
使用querystring将json对象转成key/value串
let querys = querystring.stringify(params);
return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size+'/?'+querys)
};
4.vue 端口设置 与跨域代理
1.proxyTable 配置代理对象可以多个 2.'/api/cms' 当遇到这个开头的 url路径时, 就代理
3.target 把ip 和端口换成这个配置的 4.pathRewrite 把 /api 换成 "" 空就是去掉api
列如 访问 http://127.0.0.1:11000/api/cms/list/1/5 就会被代理为: http://127.0.0.1:31001/cms/list/1/5
const path = require('path')
var proxyConfig = require('./proxyConfig')
let sysConfig = require('./sysConfig')
let xcApiUrl = sysConfig.xcApiUrl
module.exports = {
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api/cms': {
target: 'http://localhost:31001',
pathRewrite: {
'^/api': ''
}
}
}
host: 'localhost',
port: 11000, //
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
}
确认弹窗
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
}).catch(() => {
});
vue url跳转带参数
一.this.$route.query
v-bind: to"{ path:'url', query :{ key :value ,} }" 表示跳转 跳转后url 参数中 就会拼接为 ?key=value ..的形式
<router-link class="mui-tab-item" :to="{path:'/cms/page/add',query:{
page: this.params.page,
siteId: this.params.siteId}}">
<el-button type="primary" size="small">新增页面</el-button>
</router-link>
接收端返回时就可以 从url中 获取参数 继续带上这些参数返回 this.$router.push({path :'url' ,query:{ } })
go_back(){
this.$router.push({
path: '/cms/page/list', query: {
page: this.$route.query.page,
siteId:this.$route.query.siteId
}
})
}
二.this.$route.params
跳转方法 this.router.push( { name:′ detail ′,params:{id:id } })
获取参数 this.route.params.id
路由配置
{ path:'/mtindex',
component: mtindex,
children:[
{
path:"/detail",
name:'detail',
component:guessdetail
}]}
name表示在路由中配置的名称 注意:在url中不会看见参数信息
三.路由获取参数
handleManage: function (id) {
this.$router.push({ path: '/course/manager/'+id})
}
在路由中 path: '/course/manager/:courseid 使用 : id 接受这个参数
export default [
{
path: '/course',
component: Home,
name: '课程管理',
hidden: false,
iconCls: 'el-icon-document',
children: [
{ path: '/course/list', name: '我的课程',component: course_list,hidden: false },
{ path: '/course/manager/:courseid', name: '管理课程',component: course_manage,hidden: true ,
children: [
{ path: '/course/manage/baseinfo/:courseid', name: '基本信息',component: course_baseinfo,hidden: false },
]}]}]
push 设置值
设置data 数据中的 值
query() {
cmsApi.page_list(this.params.page, this.params.size, this.params).then((res) => {
. this.listData = push (res.list)
}
el 分页组件
<el-col :span="24" class="toolbar">
<el-pagination background layout="prev, pager, next" @current-change="changePage" :page-size="this.params.size"
:total="total" :current-page="this.params.page"
style="float:right;">
</el-pagination>
</el-col>
changePage(page) {
this.params.page = page;
this.query()
},
query() {
cmsApi.page_list(this.params.page, this.params.size, this.params).then((res) => {
this.total = res.queryResult.total;
this.list = res.queryResult.list
})}},