java大师博客网站

vue教程

  • vue模拟el-table演示插槽用法 最近开发了一套图书管理系统,有兴趣的同学可以看下:图书管理系统演示 很多人知道插槽分为三种,但是实际到elementui当中为什么这么用,就一脸懵逼,接下来就跟大家聊一聊插槽在elementui中的应用,...
  • 通过封装el-table的方式,创建我们自己的Mytable组件 做了一个图书管理系统,有兴趣的朋友可以看下:图书管理系统演示 1、好处: 通过封装 el-table 组件,创建我们自己的 Mytable 组件,可以带来以下好处: 复用代码...
  • Login.vue <template> <div class="login-container"> <el-card class="login-card"> <h3 class="login-title...
  • vue3整合axios 3.1导入依赖 npm install axios 3.2新建util文件夹,创建api.js import axios from 'axios' import {ElLoading,ElMessage} from 'e...
  • vue3 hook函数返回多个对象 如果你想导出一个使用ref包装的对象,你可以使用toRef函数将对象的属性转换为响应式引用。这样,当属性的值发生变化时,它将自动触发重新渲染。 以下是一个示例代码: import { ref, toRef ...
  • vue通用的增删改查按钮组件 代码复用:这个组件可以在多个页面或组件中使用,避免了重复编写相同的按钮代码。 灵活性:通过showButtons属性,可以根据需要显示不同的按钮。默认情况下,它会显示添加、修改和删除按钮,但你也可以根据具体情况传递...
  • vue动态路由页面刷新后路由消失处理 原因:页面刷新后,页面会重新实例化路由数据,因为是动态路由,所以页面刷新后会将router置为router/index.js配置的原始路由数据,所以匹配路由地址的时候会报错。因为只需要在用户会话期间保持动态路...
  • 在ES6中,我们可以使用几种方式来遍历对象。下面是其中的几种方式,并附带详细的示例: for...in循环: 使用for...in循环可以遍历对象的可枚举属性。它会遍历对象自身的属性以及继承的属性(如果属性是可枚举的)。 const obj ...
  • 要使用自己的directives指令,需要按照以下步骤进行: 在Vue实例中注册指令 在Vue实例的创建函数中,可以使用Vue.directive方法来注册自定义指令。例如: // 创建Vue实例 var app = new Vue({ e...
  • Vue2和ElementUI编写的无限级菜单路由 文章转载自:www.javaman.cn <template> <div> <el-menu :default-active="$route.path" clas...
解决vue刷新路由失效的问题 - java大师  java大师博客网站

Login.vue

<template>
  <div class="login-container">
    <el-card class="login-card">
      <h3 class="login-title">用户登录</h3>
      <el-form ref="loginForm" :model="user" :rules="rules" label-width="80px" class="login-form">
        <el-form-item prop="username" label="用户名">
          <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="user.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="userLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


import { ref } from 'vue';
import {login} from "@/util/request";
import {filterMenus, initRouter} from "@/util/routeUtil";
import router from "@/router";
export default {
  name:'Login',
  setup() {
    const user = ref({
      username: 'admin',
      password: '123456',
    });

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      ],
    };

    function userLogin(){
      console.log('user',user.value);
      login(user.value).then(res => {
        if (res.data.message='登录成功'){
          //1、初始化路由
          initRouter(res.data.data.role.menus)
          window.localStorage.setItem('navMenus',JSON.stringify(filterMenus(res.data.data.role.menus)))
          //2、跳转到主页
          router.replace('/index')
        }
      })
    }

    return {
      user,
      rules,
      userLogin,
    };
  },
};


<style>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-card {
  width: 400px;
  padding: 20px;
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}

.login-form {
  margin-top: 20px;
}
</style>

==注意:==原因:页面刷新后,页面会重新实例化路由数据,因为是动态路由,所以页面刷新后会将router置为router/index.js配置的原始路由数据,所以匹配路由地址的时候会报错。因为只需要在用户会话期间保持动态路由状态,而不需要在不同组件之间共享或进行状态管理,所以将其存储在localStorage中

##修改Login.vue,将后台传回的menus数据缓存到localStorage中
//1、初始化路由
initRouter(res.data.data.role.menus)
localStorage.setItem('navMenus',JSON.stringify(filterMenus(res.data.data.role.menus)))
localStorage.setItem('menus',JSON.stringify(res.data.data.role.menus))
localStorage.setItem('token',JSON.stringify(res.data.data.token))

修改main.js,页面刷新的时候,会出发main.js的调用,因此我们在页面刷新的时候,重新进行路由的初始化

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'  //暗黑模式
import router from './router/index'
import {initRouter} from "@/util/routeUtil";

const app = createApp(App)

##初始化路由
const init = async ()=>{
    if (localStorage.getItem('token')){
        if (localStorage.getItem('menus')){
            await initRouter(JSON.parse(localStorage.getItem('menus')))
        }
    }
}

##通过await,在挂在之前先进行路由的初始化
const call = async ()=>{
    await init()
    app.use(ElementPlus)
    app.use(router)
    app.mount('#app')
}

##调用
call()

全部评论: 0

    我有话说: