vue動態路由的傳參
阿新 • • 發佈:2022-05-12
動態路由傳參:
當我們很多個頁面或者元件都要被很多次重複利用的時候,我們的路由都指向同一個元件,這時候從不同元件進入一個"共用"的元件,並且還要傳引數,渲染不同的資料,這就要用到動態路由跟路由傳參了。
一、vue路由基礎用法:
1 .安裝 npm install vue-router --save 2 .main.js中 //Vue路由:引入 import VueRouter from 'vue-router' Vue.use(VueRouter) //Vue路由:引入並建立元件 import BYHome from './components/BYHome.vue' import BYNews from './components/BYNews.vue' import HelloWorld from './components/HelloWorld.vue' //Vue路由:配置路由 const routes = [ {path: '/home', component: BYHome}, {path: '/news', component: BYNews}, {path: '/helloworld', component: HelloWorld}, {path: '*', redirect: '/home'} /*預設跳轉路由 */ ] //Vue路由:例項化VueRouter const router = new VueRouter({ routes //縮寫,相當於 routes:routes }) new Vue({ router, //Vue路由:掛載路由 render: h => h(App), }).$mount('#app') //Vue路由:根元件的模板裡面放上下面這句話,需要在App.vue 中配置路由出口:路由匹配到的元件將渲染在根元件App.vue中<router-view></router-view> //路由跳轉 <router-link to="/home">首頁</router-link> <router-link to="/news">新聞</router-link> <router-link to="/helloworld">helloWorld</router-link>
二、路由跳轉:
<router-link to="/home">首頁</router-link> <router-link to="/news">新聞</router-link> <router-link to="/helloworld">helloWorld</router-link>
三、路由動態傳值:
1.獲取路由的get傳值 //路由配置 import BYHomeDetail from '../BYHomeDetail.vue' {path: '/homeDetail', component:BYHomeDetail}, //跳轉時跟get引數 <li li v-for="(listItem,homeKey) in msglist"> <router-link:to="'/homeDetail?id='+homeKey"> {{listItem.title}} </router-link> </li> //子頁面獲取路由的get傳值 mounted(){ console.log(this.$route.query); }
2.動態路由傳值 //路由配置:帶形參 import BYNewDetail from '../BYNewDetail.vue' {path: '/newDetail/:aid', component: BYNewDetail}, //跳轉時傳值 <li v-for="(item,key) in list"> <!-- 給 newDetail 傳值 --> <router-link :to="'/newDetail/'+key">{{key}}--{{item}}</router-link> </li> //子頁面獲取動態路由傳值 mounted(){ console.log(this.$route.params); }
四、路由的跳轉方式:
query傳參:相當於get 必須定義path屬性,通過query傳參 通過 this.$route.query 接收引數
資料重新整理不會丟失,只能傳字串,如果不是字串會自動轉換成字串再傳。
params傳參:必須定義 name 屬性,通過params傳參 通過 this.$route.params接收引數
資料重新整理會丟失,可以傳陣列或者物件,大小不受限制。