16 不同路由傳值

2021-09-25 16:26:03 字數 2041 閱讀 1694

示例:新聞列表頁→新聞詳情頁傳值

一、動態路由

1、配置動態路由

main.js**及截圖

// the vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import vue from 'vue'

import vueresource from 'vue-resource'

import vuerouter from 'vue-router'

vue.use(vueresource);

vue.use(vuerouter);

import home from './components/home.vue';

import news from './components/news.vue';

import detail from './components/detail.vue';

//建議不要修改routes名稱,避免出錯

const routes = [

, ,

//動態路徑引數,以冒號開頭

, //預設跳轉路由,若路由匹配不到,則跳轉到首頁 ]

2、獲取引數值:this.$route.params.引數名

news.vue**:傳值

detail.vue**:獲取值

二、get傳值

1、配置路由

main.js**及截圖

// the vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import vue from 'vue'

import vueresource from 'vue-resource'

import vuerouter from 'vue-router'

vue.use(vueresource);

vue.use(vuerouter);

import home from './components/home.vue';

import news from './components/news.vue';

import detail from './components/detail.vue';

//建議不要修改routes名稱,避免出錯

const routes = [

, ,

, //預設跳轉路由,若路由匹配不到,則跳轉到首頁 ]

2、獲取引數值:this.$route.query.引數名

news.vue**:傳值

detail.vue**:獲取值

演算法(16) 不同路徑

僅記錄學習筆記,如有錯誤歡迎指正。乙個機械人位於乙個 m x n 網格的左上角 起始點在下圖中標記為 start 機械人每次只能向下或者向右移動一步。機械人試圖達到網格的右下角 在下圖中標記為 finish 問總共有多少條不同的路徑?思路 採用動態規劃。動態規劃要求利用到上一次的結果,是一種特殊的迭...

react路由傳值

最後,修改新聞列表元件news.js 當我們點選新聞列表頁面的新聞時,頁面就會跳轉到詳情頁,但是在實際的執行中,當點選不同的新聞標題時,需要根據新聞id或者其他識別符號在詳情頁請求載入不同的新聞詳情,在新聞列表頁面,我們可以根據點選事件,知道我們當前新增的這條新聞的id,但是在詳情頁並不知道,所以需...

vue 元件傳值 頁面(路由)傳值

一 元件傳值 1 父元件 子元件 屬性傳值 在父元件頁面引入子元件並在,兒子身上繫結屬性 list list 父元件頁面data中填寫要傳遞的值 list a,b,c 子元件頁面接受 props 子元件頁面就可以拿到值了 2 子元件 父元件 事件傳值 子元件中定義事件 showmenu 通過 emi...