在vue的實(shí)際開發(fā)中往往會遇到公用一個(gè)組件的問題，比如有一個(gè)菜單中的兩個(gè)按鈕，點(diǎn)擊每個(gè)按鈕調(diào)用的是同一個(gè)組件，其內(nèi)容是根據(jù)路由的參數(shù)的不同來請求不同的內(nèi)容。

10年的東港網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整東港建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“東港網(wǎng)站設(shè)計(jì)”,“東港網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

第一步，首先新建一個(gè)vue+webpack+vuecli的demo，如下操作：

全局安裝vue-cli，vue-cil是vue的腳手架工具，安裝命令：

npm install -g vue-cli

第二步，進(jìn)入到工程目錄中，創(chuàng)建一個(gè)vuedemo的文件夾工程，如下兩步操作：

cd vue_test_project //進(jìn)入vue_test_project目錄下
vue init webpack vuedemo //在vue_test_project目錄下創(chuàng)建一個(gè)vuedemo工程

輸入這個(gè)命令之后，會出現(xiàn)一些提示，是什么不用管，一直按回車即可。

第三步，如下操作：

cd vuedemo
npm install

執(zhí)行npm install需要一點(diǎn)時(shí)間，因?yàn)闀?a title="服務(wù)器" target="_blank" >服務(wù)器上下載代碼啦之類的。并且在執(zhí)行過程中會有一些警告信息。不用管，等著就是了。如果長時(shí)間沒有響應(yīng)，就ctrl+c停止掉，然后再執(zhí)行一次即可。

最后一步，操作如下：

npm run dev

在運(yùn)行了npm run dev之后，會自動打開一個(gè)瀏覽器窗口，就可以看到實(shí)際的效果了。這個(gè)demo就創(chuàng)建好了?，F(xiàn)在就在這個(gè)demo中添加一些內(nèi)容，修改成如下：

修改HelloWorld.vue的內(nèi)容為如下：

路由router下的index.html的修改為如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import content from '@/components/conDetail'
Vue.use(Router)
export default new Router({
 routes: [
 {
 path: '/',
 name: 'HelloWorld',
 component: HelloWorld,
 children:[
  {name:'content',path:'content/:differId',component:content}
 ]
 }
 ]
})

現(xiàn)在創(chuàng)建一個(gè)conDetail.vue了，如下：

結(jié)果就是，當(dāng)點(diǎn)擊內(nèi)容按鈕1，出現(xiàn)了對象的內(nèi)容，點(diǎn)擊內(nèi)容按鈕2，出現(xiàn)相應(yīng)的內(nèi)容。當(dāng)然我這兒寫的是點(diǎn)擊按鈕2的時(shí)候，其items的內(nèi)容為空數(shù)組。這兒也使用了$route的監(jiān)聽。

復(fù)用組件時(shí)，想對路由參數(shù)的變化作出響應(yīng)的話，你可以簡單地 watch（監(jiān)測變化） $route 對象：

const User = {
 template: '...',
 watch: {
 '$route' (to, from) {
  // 對路由變化作出響應(yīng)...
 }
 }
}

或者使用 2.2 中引入的 beforeRouteUpdate 守衛(wèi)：

const User = {
 template: '...',
 beforeRouteUpdate (to, from, next) {
 // react to route changes...
 // don't forget to call next()
 }
}

總結(jié)

以上所述是小編給大家介紹的解決在vue+webpack開發(fā)中出現(xiàn)兩個(gè)或多個(gè)菜單公用一個(gè)組件問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！