이 글에서는 vue+webpack의 실제 개발에서 컴포넌트를 공유하기 위한 두 개 이상의 메뉴에 대한 솔루션을 주로 소개합니다. 필요한 친구들은 참고하면 됩니다.
실제 vue 개발에서 우리는 종종 컴포넌트를 공유하는 문제에 직면합니다. 예를 들어, 메뉴에 두 개의 버튼이 있고 각 버튼을 클릭하면 동일한 구성 요소가 호출되며 해당 콘텐츠는 서로 다른 라우팅 매개변수에 따라 서로 다른 콘텐츠를 요청합니다.
첫 번째 단계에서는 먼저 다음과 같이 vue+webpack+vuecli의 새 데모를 만듭니다.
vue-cli를 전역적으로 설치합니다. vue-cil은 vue용 스캐폴딩 도구입니다. 설치 명령:
npm install -g vue-cli
두 번째 단계, 프로젝트 입력 디렉터리에서 vuedemo 폴더 프로젝트를 만들고 다음 두 단계를 따르세요.
cd vue_test_project //进入vue_test_project目录下 vue init webpack vuedemo //在vue_test_project目录下创建一个vuedemo工程
이 명령을 입력하면 몇 가지 프롬프트가 표시됩니다. 프롬프트가 무엇인지 걱정하지 말고 Enter 키를 계속 누르세요.
세 번째 단계는 다음과 같습니다.
cd vuedemo npm install
코드가 서버에서 다운로드되기 때문에 npm install을 실행하는 데 시간이 걸립니다. 그리고 실행 중에 몇 가지 경고 메시지가 표시됩니다. 걱정하지 마세요. 기다리세요. 오랫동안 응답이 없으면 Ctrl+C를 눌러 중지한 후 다시 실행하세요.
마지막 단계는 다음과 같습니다.
npm run dev
npm run dev를 실행하면 브라우저 창이 자동으로 열리고 실제 효과를 확인할 수 있습니다. 이 데모가 생성되었습니다. 이제 이 데모에 일부 콘텐츠를 추가하고 다음과 같이 수정합니다.
HelloWorld.vue의 콘텐츠를 다음과 같이 수정합니다.
<template> <p class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <p class="btn"> <router-link :to="{name:'content',params:{differId:'con1'}}">内容按钮1</router-link> <router-link :to="{name:'content',params:{differId:'con2'}}">内容按钮2</router-link> </p> <router-view></router-view> </p> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
라우팅 라우터 아래의 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} ] } ] })
Now 다음과 같이 conDetail .vue를 생성합니다.
<template> <p class="same"> 这个是相同的内容 <p class="conlist"> <template v-for="item in items"> <p>{{item.con}}</p> </template> </p> </p> </template> <script> export default { name: 'conDetail', data () { return { msg: '', differIdType:'', conlist:[ {'con':'这是第一个内容按钮的内容1'}, {'con':'这是第一个内容按钮的内容2'} ], items:[], } }, mounted(){ this.differIdType = this.$route.params.differId == 'con1' ? '0' : '1'; if(this.differIdType == 0){ this.items = this.conlist; }else{ this.items = []; } }, watch:{ $route:function(to,from){ this.differIdType = to.params.differId == 'con1' ? '0' : '1'; if(this.differIdType == 0){ this.items = this.conlist; }else{ this.items = []; } } } } </script> <style> </style>
결과적으로 콘텐츠 버튼 1을 클릭하면 객체의 콘텐츠가 나타나고, 콘텐츠 버튼 2를 클릭하면 해당 콘텐츠가 나타납니다. 물론, 내가 여기에 쓰는 것은 버튼 2를 클릭하면 해당 항목의 내용이 빈 배열이라는 것입니다. $route 모니터링도 여기서 사용됩니다.
컴포넌트를 재사용할 때 라우팅 매개변수의 변경에 응답하려면 간단히 $route 객체를 관찰(변경 모니터링)할 수 있습니다.
const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } }
또는 2.2에 도입된 beforeRouteUpdate 가드를 사용하세요.
const User = { template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() } }
위 내용은 제가 컴파일한 것입니다. 여러분, 앞으로 모든 분들께 도움이 되었으면 좋겠습니다.
관련 기사:
Angular를 사용하여 기본 장바구니 기능을 구현하는 방법
node.js의 라우팅 및 미들웨어에 대한 자세한 소개
에서 자세히 실행되는 입력 기능위 내용은 vue+webpack에서 구성요소 공유 문제(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!