SpringBoot+Vue 博客系统（十）：VUE路由 vue-route

╰半夏微凉° 2023-10-12 11:07 6阅读 0赞

> 签名：但行好事，莫问前程。

#### 文章目录 ####

*  一、安装vue-route
 *  二、登录跳转首页
 *  三、退出登录
 *  总结

--------------------

![在这里插入图片描述][cd5f50488ab34cfca683492790ce7804.png]

## 一、安装vue-route ##

npm i vue-route@3.5.4

index.js

import VueRouter from 'vue-router';
    
    const routes = [
      {
        path: '/',
        name: 'login',
        component:()=>import('../components/Login')
      },
      {
        path: '/Index',
        name: 'index',
        component:()=>import('../components/Index')
      }
    ]
    const router =new VueRouter({
      mode: 'history',
      routes
    })
    
    export default router;

![在这里插入图片描述][85c463ad64ea4255b9e64b2abd1bae31.png]

导入

// 引入vue-router
    import VueRouter from 'vue-router';
    import router from './router';
    
    Vue.use(VueRouter);

![在这里插入图片描述][1b0aff1038094ecf91465d1284071d32.png]

## 二、登录跳转首页 ##

<template>
      <div id="loginForm"
           style="margin: auto;
           margin-top: 15%;
           width: 20%;
           border: dimgrey 1px">
        
        <el-form ref="form" :rules="rules" :model="user" label-width="80px"
                 style="border: 1px;
                 background-color: blanchedalmond;
                 border-radius: 10px;
                 padding-top: 20px">
          <div style="padding-left: 140px; margin-bottom: 10px;">
            <span style="font-size: 20px;">登  录</span>
          </div>
          <hr>
          <div style="margin-top: 10px">
            <el-form-item label="姓名：" prop="userName">
              <el-col :span="20">
                <el-input v-model="user.userName"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="密码：" prop="passWord">
              <el-col :span="20">
                <el-input v-model="user.passWord" type="password"></el-input>
              </el-col>
            </el-form-item>
          </div>
          <div style="padding-left: 100px; padding-bottom: 15px">
            <el-button type="primary" style="width: 130px" size="small" @click="login" :disabled="login_disable">登 录</el-button>
          </div>
        </el-form>
      </div>
    </template>
    
    <script>
    export default {
          
      name: 'Login',
      data () {
          
        return {
          
          login_disable :false,
          // user对象
          user: {
          
            userName: '',
            passWord: '',
          },
          rules: {
          
            userName: [
              {
          required: true, message: '请输入姓名', trigger: 'blur'},
            ],
            passWord: [
              {
          required: true, message: '请输入密码', trigger: 'blur'},
            ],
          }
        }
      },
      methods: {
          
        login () {
          
          this.login_disable = true
          this.$refs.form.validate((valid) => {
          
            if (valid) {
          
              this.$axios.post(this.$httpUrl + '/user/login', this.user).then(res => res.data).then(res => {
          
                if (res.code == 200) {
          
                  // 保存用户token
                  sessionStorage.setItem('user', JSON.stringify(res.data))
                  console.log('user:' + JSON.stringify(res.data))
                  // 跳转到后台管理首页
                  this.$router.replace('/Index');
                } else {
          
                  this.login_disable = false
                  // 提示错误信息
                  this.$message({
          
                    message: res.message,
                    type: 'warning'
                  })
                }
              })
            } else {
          
              return false
            }
          })
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

![在这里插入图片描述][7095412536dc488fbc84d23169c949b2.png]

登录成功跳转首页

![在这里插入图片描述][dcaf6e8405e8403d8127b3b8f020999b.png]  
跳转成功

## 三、退出登录 ##

loginOut () {
          console.log('退出')
          this.$confirm('是否退出系统？', '退出', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '退出登录成功'
            })
            // 跳转到登录页面
            this.$router.push('/')
            // 清空sessionStorage缓存
            sessionStorage.clear()
          }).catch(()=>{
            this.$message({
              type: 'info',
              message: '取消操作'
            })
          })
        },

效果：  
![在这里插入图片描述][bca3fe569f13463baf72e3ed1bb30943.png]

退出成功

![在这里插入图片描述][2bc7f6c1fd664ac5b18d9819077da589.png]

--------------------

## 总结 ##

以上记录了VUE路由 vue-route的使用，如果对你有所帮助，请一键三连。

[cd5f50488ab34cfca683492790ce7804.png]: https://img-blog.csdnimg.cn/cd5f50488ab34cfca683492790ce7804.png
[85c463ad64ea4255b9e64b2abd1bae31.png]: https://img-blog.csdnimg.cn/85c463ad64ea4255b9e64b2abd1bae31.png
[1b0aff1038094ecf91465d1284071d32.png]: https://img-blog.csdnimg.cn/1b0aff1038094ecf91465d1284071d32.png
[7095412536dc488fbc84d23169c949b2.png]: https://img-blog.csdnimg.cn/7095412536dc488fbc84d23169c949b2.png
[dcaf6e8405e8403d8127b3b8f020999b.png]: https://img-blog.csdnimg.cn/dcaf6e8405e8403d8127b3b8f020999b.png
[bca3fe569f13463baf72e3ed1bb30943.png]: https://img-blog.csdnimg.cn/bca3fe569f13463baf72e3ed1bb30943.png
[2bc7f6c1fd664ac5b18d9819077da589.png]: https://img-blog.csdnimg.cn/2bc7f6c1fd664ac5b18d9819077da589.png