vue+element随笔,页面跳转

上次讲了.net和数据库之间的简单交互操作,我目前接触到的也只是各种相关的变化而已,除此之外,接口的返回信息等操作,相应公司都会有自己的模板,实在不行直接return

接下来讲一下前端vue的一些遇到的问题,这里使用了element插件(用了公司前辈的框架,element引入基本没有考虑,自己用的时候记得注意)

这只是一个初学者的见识,可能会过于简单,但这是没有相关经验的我确确实实遇到的问题,解决方法也可能依然有错误\不足

页面的设计方面,纯属刚接触,能完成功能就行,因此不再写出

先讲一下路由方面:

主页src/router/home/index.js

const Home = () => import('@/views/home/Home.vue'); // 首页
const Children1= () => import('@/views/children/children1.vue');
const Children2= () => import('@/views/children/children2.vue');
export default [
  {
    path: '/',
    component: Home,
    children: [ //放子页面,没有就为[]
      { // 三种不同的跳转方式
        path: '/children1',
        name: 'children1',
        component: Children1,
      },
      {
        path: '/children2',
        name: 'children2',
        component: Children2,
      },
    ],
  },
];

src/router/index.js

const routes = [
  ...home,
];

跳转

home.vue跳转子页面(需要注意的位置标红,样式按需添加)

<el-container> // element布局容器
      <el-aside> // 点击左侧项,在右侧显示对应页面
        <el-menu :default-active="$route.path" router>
          <el-menu-item-group>
            <el-menu-item index="/step1" slot="title">大儿子</el-menu-item> //跳转子页面1
            <el-menu-item index="/step2" slot="title">二儿子</el-menu-item> //跳转子页面2
          </el-menu-item-group>
        </el-menu>
      </el-aside>
      <el-container">
        <el-main>
          <router-view></router-view> //子页面显示位置
        </el-main>
      </el-container>
    </el-container>

跳转非子页面

直接放在那个按钮里

存在多种传递参数的方式,这里列出我用的一种,因为会在url栏中显示,所以尽量进行加密处理

如:

<el-button type="primary" @click="join">进入下个页面</el-button>
join() {
　　// this.$router.replace('/GetPersonnelList'); //不传递参数
　　this.$router.push({ // 传递参数
        path: '/Application',
        query: {
          id(自定义): this.id(要传递的参数), //传递的参数(建议加密)
        },
      });
}

接受

id(自定义):this.$route.query.id(上个页面传递的)(如果加密记得解密)

接口方面

src/store/services/xxx.services.js

getData:(xx) => getHttp({ url: '/xx/xxx', params: { xx } }),
// url是后端接口位置,
// params是接口参数,可以是多个,
// getHttp需import引用
找一个页面hone.vue,
先引入import xxx from '@/services/xxx.service';
按需求放到页面创建运行的位置,或按钮点击运行的位置 const res = xxx.getData(this.one);(有返回值)