vue2-router组件

此文章记录使用vue2框架中的路由组件的使用，应用为默认重定向到登录页，即打开 http://localhost:8080/就跳转到 http://localhost:8080/LoginView。

回顾以下前端工程重点文件和目录：

一、首先创建vue2项目

使用 npm create + 项目名称，按照提示创建即可，需要注意的是项目需要基于vue2，如下图：

二、在main.js中引入router

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

注意和原始文件中代码的差异，首先导入router组件的router对象，然后创建一个Vue实例，并将router导入即可

三、在src文件夹下创建router子文件夹

在router子文件夹下创建index.js文件

import Vue from 'vue';
import VueRouter from 'vue-router';
import LoginView from '../views/LoginView.vue';
// 引入你的组件
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';
Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    redirect: '/LoginView', // 默认重定向到登录页
  },
  {
    path: '/',
    name: 'HomeView',
    component: HomeView,
  },
  {
    path: '/AboutView',
    name: 'AboutView',
    component: AboutView,
  },
  {
    path: '/LoginView',
    name: 'LoginView',
    component: LoginView,
  },
  // 其他路由配置
];

const router = new VueRouter({
   mode: 'history', // 可选：使用 HTML5 history 模式，这意味着路由将不再使用 URL 中的 # 符。
  base: process.env.BASE_URL, //默认值是 /
  routes,
});

export default router;

随后创建LoginView以及其他vue文件即可。下面给出我创建的登录代码

<template>
  <div >
    <el-container>
      <el-header style="text-align: center;"><h1>线上KVT系统</h1></el-header>
      <el-main>
        <el-form ref="form" :model="form" style="display: flex; flex-direction:column;align-items:center;">
          <el-form-item label="账号" style="display: flex; align-items: center;">
            <el-input v-model="form.username" ></el-input>
          </el-form-item>

          <el-form-item label="密码" style="display: flex; align-items: center;">
            <el-input v-model="form.password" ></el-input>
          </el-form-item>

          <el-form-item style="display: flex;justify-content: center;align-item:center;">
            <el-button type="primary" @click="onLogin">登录</el-button>
            <el-button>注册</el-button>
          </el-form-item>
        </el-form>

      </el-main>
    </el-container>
  </div>
</template>

<script>


export default {
  data() {
    return {
      form:{
        username:'',
        password:''
      }
    };
  },
  methods: {
    onLogin(){
      console.log("onLogin:", this.username, this.password);
    }
  },
};
</script>

<style scoped>

</style>