请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

跟着3-22课程编写代码后,无法实现界面跳转

按照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()
}
})

还请老师帮忙看一下,哪里有问题,感谢

正在回答 回答被采纳积分+3

2回答

慕粉0017311969 2022-11-12 18:04:10

路由版本问题,先卸载原先版本npm uninstall vue-router,然后重新下载个

npm install vue-router


0 回复 有任何疑惑可以回复我~
疯狂的全栈 2022-05-01 09:29:43

检查下main.js是否导入权限控制模块:import './permission',permission.js和main.js是在同一个目录下。

0 回复 有任何疑惑可以回复我~
  • 跳转路由和权限控制模块有什么关系。。。
    回复 有任何疑惑可以回复我~ 2022-05-15 08:54:22
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信