Nuxt的路由配置和引數傳遞

2021-09-02 19:32:19 字數 1173 閱讀 7219

學習前端框架都要學習路由機制,因為路由可以體現我們的業務邏輯,把模組串聯起來,讓程式換發光彩。那簡單的說路由就是我們的跳轉機制,也可以簡單理解成鏈結跳轉。nuxt.js的路由並不複雜,它給我們進行了封裝,讓我們節省了很多配置環節。

在about資料夾下新建index.vue檔案,**如下:

在news資料夾下新建index.vue檔案,**如下:

結果如下:

標籤

雖然上面的例子跳轉已經成功,但是nuxt.js並不推薦這個中標籤的作法,它為我們準備了標籤(vue中叫元件)。我們標籤替換成

about資料夾下新建index.vue

news資料夾下新建index.vue

pages資料夾下的index.vue

params傳遞引數路由經常需要傳遞引數,我們可以簡單的使用params來進行傳遞引數,我們現在向新聞頁面(news)傳遞個引數,然後在新聞頁面進行簡單的接收。

我們先修改pages下的index.vue檔案,給新聞的跳轉加上params引數,傳遞3306id。

在news資料夾下的index.vue裡用$route.params.newsid進行接收(路由傳參的接收方式與vue.js的接收方式基本相似),**如下。

nuxt路由傳多個引數

用nuxt做的專案,剛好遇到路由跳轉傳多個引數問題 詳情頁命名為 id.vue 跳轉到詳情頁去 或者this.router.push 一定得注意是mystrategy id,不是mystrategy 接收引數 async asyncdata 或者 computed 參考文章 經過今天的測試,通過以上...

vue路由傳遞引數

1.通過path來確定匹配的路由,通過query來傳遞引數 傳參 golist title,id 注意這裡是 router 接參 this.params.brandid this.route.query.id 這裡是 route2.通過路由屬性name確定匹配路由,通過params傳遞引數 傳參 g...

react路由引數傳遞

react路由的三種傳參方式 1 向路由元件傳遞params引數 引數傳遞 在註冊路由時接收引數 注意這裡後面時冒號在前面的 在要展示的元件內接收params引數 2 第二種,利用search傳遞引數 向路由元件傳遞引數 這種方式類似js常用方式傳遞引數 在路由註冊是接收引數 這裡是不需要接收的,正...