力软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 })
    }
})