力软vue前端开发：使用params跳转传参404问题解决

问题描述

this.$router.push({ name: 'page', query: { id: '001' } }) // 根据路由名称 + query 的方式跳转传参

使用query传参时，参数会拼接在链接后，点击搜索条件链接参数也还在。用户需要重新进入搜索页面。

所以，使用name+params进行传参。参数不会出现在url路径上面，刷新页面时param里面的数据会消失，类似post传参。

this.$router.push({ name: 'page', params: { id: '001' } })  // 根据路由名称 + params 的方式跳转传参

但是在力软的默认路由中没有给每个页面的name赋值。所有无法获取要跳转页面的name值。如下:

const requireComponent = require.context('../views', true, /i\.js$/)
requireComponent.keys().map(fileName => {
    const nameList = fileName.split('/')
    if (nameList.length == 3 && nameList[2] == 'i.js') {
        const name = nameList[1]
        pageViews.push({ name: '', path: `/${module.code}/${name}`, meta: requireComponent(fileName).default })
    }
})

---

解决方法第一步：

提示：给页面赋上name值：

const requireComponent = require.context('../views', true, /i\.js$/)
requireComponent.keys().map(fileName => {
    const nameList = fileName.split('/')
    if (nameList.length == 3 && nameList[2] == 'i.js') {
        const name = nameList[1]
        pageViews.push({ name: name, path: `/${module.code}/${name}`, meta: requireComponent(fileName).default })
    }
})

测试：

经测试，点击跳转后直接到了404，无法找到页面

 解决方法第二步：

经过调试，发现require.context('../views', true, /i\.js$/)获取到的目录名称均为首字母大写，但在后台菜单管理配置成了小写。所以匹配不到。于是修改了菜单上的路径（要和文件夹名称保持一致）。

 

测试：

能正常跳转和传参。