在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
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。