希望的效果如下:

• 2個(gè)路由: 點(diǎn)擊如下
  
  

步驟.

• 使用 router-link 來指定路由路徑
• 在router.js中指定 路徑的 事件處理函數(shù)(對(duì)應(yīng)的組件)
• 創(chuàng)建對(duì)應(yīng)的組件

router-link

• 找到一個(gè)區(qū)別各個(gè)列表的屬性(id),將其作為參數(shù)傳遞到路由中
• to是vue-router中用來綁定路由的屬性
• 由于需要進(jìn)行計(jì)算(path + id),故需要將to改為 :to

// NewsList.vue <router-link :to=" '/home/newsinfo/' + item.id "><img class="mui-media-object mui-pull-left" :src="item.img_url"><div class="mui-media-body"><h1> {{ item.title }} </h1><p class="mui-ellipsis"><span>發(fā)表時(shí)間: {{ item.add_time | dateFormat }} </span><span>點(diǎn)擊: {{ item.check }} 次</span></p></div> </router-link>

路由對(duì)應(yīng)組件

• 使用 :id 來獲取 “http://localhost:5500/#/home/newsinfo/13” 中的最后一個(gè)參數(shù),屬性名為 id
• 使用 :id 綁定后,即可在 $route的params中獲取 id 屬性了.

// router // 導(dǎo)入 vue-router import VueRouter from 'vue-router' // 導(dǎo)入相應(yīng)的組件 import NewsInfo from './lib/components/news/NewsInfo.vue'var router = new VueRouter({routes:[{ path: '/', redirect: '/home' }, // 重定向{ path: '/home/newsinfo/:id', component: NewsInfo }],linkActiveClass:'mui-active' // 路由激活時(shí)的樣式 })

創(chuàng)建組件(NewsInfo.vue)

• url信息綁定在Vue實(shí)例的 $route上
• created：是Vue生命周期中最早可以使用data和方法的函數(shù)
• 可以通過打印 this.$route 將路由信息輸出到控制臺(tái)
  
• 可以看見,傳遞的id信息在 this.$route.params.id 上
• 在tempate中會(huì)默認(rèn)指向this, 因此 在里面使用時(shí)需要去掉this.而直接使用 {{ $route.params.id }}

// NewsInfo.vue <template><div><h3>新聞詳情 --- {{ $route.params.id }} </h3></div> </template> <script> export default{data() {return {}}, } </script> <style lang="scss" scoped> </style> 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vue --- 使用vue-router获取带参数的路由的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。