vue 进阶

路由规则 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
})}},