在nuxt中页面间传值问题

前段工程页面间跳转我们一般是这样写的：
在起始页面传递

js写法:
let name = "ayasa"
this.$router.push({ path : ' /404 ' , query : { name } })

html写法:
<nuxt-link :to=" '/404?name=' + name ">{{ name }}</nuxt-link>

由于使用params在页面刷新时会失效，所以这里我们尽量使用query属性，
然后在接收页面接收

 let name= this.$route.query.name

这种方法虽然有效，但会造成两个页面与前端路由耦合
解决办法是把要传递的值作为props传递给目标页面，以减少耦合
由于nuxt中将pages设置成了默认路由，这里我们手工配置路由

打开nuxt.config.js文件,在module.exports 更新以下内容

module.exports = {
    router: {
        extendRoutes(routes, resolve) {         //路由配置扩展
            routes.push({
                name: '404',                    //新建路由名字
                path: '/showDetail/:name',      //路由路径
                props: true,                    // 允许props
                component: resolve(__dirname, 'pages/404.vue') //路由组件地址
            })
        }
    }
}

保存,然后重启nuxt服务器

这样,我们在起始页面就可以这样写了

let name = "ayasa"
this.$router.push({ path : '/404/' + name }) 

或者
let name = "ayasa"
this.$router.replace({ path :  '/404?name = ' + name });

或者
<nuxt-link :to=" '/404?name=' + name ">{{ name }}</nuxt-link>

这里使用replace的原因是不会产生历史记录,无法被this.$router.go函数记录，而push函数会添加到访问记录列表,对于404页面，我们显然不希望用户在点击前进或后退按钮时看见他们出现

然后在接收端定义props选项就能使用name值了

props: {
    name: String
},
created:{
    console.log(this.name) // "ayasa"
}

作者：莎与茉
链接：https://www.jianshu.com/p/bc0b4630efb6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。