Vue 页面跳转路由

流程
**
1.新增页面（也就是组件）并暴露出去
2.新增路由，并引入新增的页面（组件），并设置路由规则
3.在入口main.js中引用路由，并使用
4.在App.vue 中使用 路由标签
**

 vue install vue-router --save-dev  // 未安装路由需要执行此命令安装路由
 npm i element-ui -S   // 安装 element ui 楼主使用到了

项目结构：

1 新建views文件夹存放页面 ，新增页面 Login.vue

<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="name">
        <el-input type="text" placeholder="请输入用户名" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">登录</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",    // 暴露此页面组件 Login
  data() {
    return {
      form: {
        name: "",
        password: ""
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push("/main");
          } else {
            this.$message({
              message:'请输入用户名密码',
              type:'warning'
            });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
};
</script>

<style lang="scss" scoped>
.login-box {
  width: 350px;
  margin: 120px auto;
  border: 1px solid #dcdef6;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 30px #dcdef6;
}

.login-title {
  text-align: center;
}
</style>

2 新增路由配置，路由配置放在router 文件夹下，新建index.js

import Vue from 'vue'
import Router from 'vue-router'   // 引入路由
import Login from '../views/Login'  // 引入刚刚暴露出去的 页面组件 Login
import Main from '../views/Main'   

Vue.use(Router); // 使用路由 必须
//配置路由 规则
export default new Router({
    routes:[{   
       //登录页  路由
        path:"/login",                // 路径
        name:'Login',               // 名称
        component:Login        // 跳转页面（组件）
    },
	//首页路由
    {
        path:"/main",
        name:'Main',
        component:Main
    }
]
})

3 .在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 VueRouter from 'vue-router'    //引入路由
import router from './router'  // 引入刚刚自己配置的路由信息
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(VueRouter);  //使用路由
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,  // 使用路局
  render: h => h(App)
})

4 在App.vue 中添加路由使用标签

5 访问 http://localhost:8080/#/login ,就会跳到我们的Login.vue 即登录页面

新建Main.vue , 点击登录时，跳转到首页也就是 Main.vue

在index.js中 添加首页的 路由配置

在 login.vue 中添加点击登录按钮时的跳转事件方法

this.$router.push("/main");

点击登录按钮