创建vue工程

  npm install vue-cli -g

第二步 创建文件夹router 和 views

 

第三步 创建前端组件 Login.vue  Main.vue

Login.vue

<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="审批人">
      <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="formInline.region" placeholder="活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    }
  }
}

</script>

<style scoped>

</style>

 

Main.vue

<template>
<h1>合理</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

 

 第四步index.js配置路由

 

 

import Vue from "vue";
import VueRouter from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";

Vue.use(VueRouter)

export default new VueRouter({

  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/Main',
      component: Main
    }
  ]
})

　　方式2：

 

 

第五步 将路由注册到 main.js 

 

 第六步 最后在App.vue 引用

 

 

 第七步 运行 npm run dev

 

 

第八步浏览器访问

此处得/login也就是路由中配置得/login