按照3-22编写的代码,路由跳转后没有到layout界面,也没有报错
【user.js】代码可以正常执行到router.push(’/’)这个位置
import { login } from '@/api/sys’
import md5 from 'md5’
import { setItem, getItem } from '@/utils/storage’
import { TOKEN } from ‘@/constant’
import router from ‘@/router’
export default {
//表示是单独的模块,不会被合并到主模块中去
namespaced: true,
state: () => ({
// getItem(TOKEN)||’‘如果getItem(TOKEN)获取不到,则为’‘
token: getItem(TOKEN) || ‘’
}),
mutations: {
setToken(state, token) {
state.token = token
setItem(TOKEN, token)
}
},
actions: {
/**
* 登录请求动作
*/
login(context, userInfo) {
const { username, password } = userInfo
// new Promise()将登录状态返回到前台
return new Promise((resolve, reject) => {
login({
username,
password: md5(password)
})
.then((data) => {
// console.log(data.token)
// 怎么解决data.data.data.token路径过长问题:使用拦截器
this.commit(‘user/setToken’, data.token)
// 跳转
console.log(router)
router.push(’/’)
resolve()
})
.catch((err) => {
reject(err)
})
})
}
}
}
路由配置:
import { createRouter, createWebHistory } from ‘vue-router’
// 公开路由表
const publicRoutes = [
{
path: ‘/login’,
// name: ‘about’,
component: () => import(’@/views/login/index’)
},
{
path: ‘/’,
// name: ‘about’,登录后界面
component: () => import(’@/layout/index’)
}
]
const router = createRouter({
//
history: createWebHistory(process.env.BASE_URL),
// 为什么使用publicRoutes公开路由表
routes: publicRoutes
})
export default router
vue.config.js代码:
const { defineConfig } = require(’@vue/cli-service’)
const path = require(‘path’)
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = defineConfig({
//webpack devServer提供了代理功能,
transpileDependencies: true,
devServer: {
// 配置反向代理
proxy: {
// 当地址中有/api的时候会触发代理机制
’/api’: {
// 要代理的服务器地址 这里不用写 api
target: ‘https://api.imooc-admin.lgdsunday.club/’,
// target: 'http://localhost:8081/'
changeOrigin: true // 是否跨域
}
}
},
chainWebpack(config) {
// 设置 svg-sprite-loader
config.module.rule(‘svg’).exclude.add(resolve(‘src/icons’)).end()
config.module
.rule(‘icons’)
.test(/.svg$/)
.include.add(resolve(‘src/icons’))
.end()
.use(‘svg-sprite-loader’)
.loader(‘svg-sprite-loader’)
.options({
symbolId: ‘icon-[name]’
})
.end()
}
})
还请老师帮忙看一下,哪里有问题,感谢
基于Vue3重写Vue-element-admin,打造后台前端综合解决方案
了解课程