Solve the problem that two or more menus share one component during vue + webpack development. vuewebpack

Solve the problem that two or more menus share one component during vue + webpack development. vuewebpack

In the actual development of vue, you may encounter a public component problem. For example, there are two buttons in a menu, and each button calls the same component, the content of the request varies according to the routing parameters.

Step 1: first create a vue + webpack + vuecli demo, and perform the following operations:

Vue-cli is installed globally. vue-pencil is the scaffold tool of vue. The installation command is as follows:

npm install -g vue-cli

Step 2: Go to the project directory and create a vuedemo Folder project. perform the following two steps:

Cd vue_test_project // enter the vue init webpack vuedemo under the vue_test_project directory // create a vuedemo project under the vue_test_project directory

After you enter this command, some prompts will appear. You just need to press Enter.

Step 3:

cd vuedemonpm install

It takes some time to execute npm install because it will download code from the server. In addition, there will be some warning information during execution. Don't worry, just wait. If there is no response for a long time, stop ctrl + c and execute it again.

The last step is as follows:

npm run dev

After running npm run dev, a browser window is automatically opened to see the actual effect. This demo is created. Now add some content in this demo and modify it as follows:

Modify HelloWorld. vue as follows:

<Template> <div class = "hello"> 

Modify index.html under routeras follows:
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 a conDetail. vue is created, as shown below:
<Template> <div class = "same"> This is the same content <div class = "conlist"> <template v-for = "item in items"> <p> {{item. con }}</p> </template> </div> </template> <script> export default {name: 'condetail ', data () {return {msg: '', differIdType:'', conlist: [{'Con ':' This is the content of the first content button 1'}, {'Con ': 'this is the content of the first content button 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 =. params. differId = 'con1 '? '0': '1'; if (this. differIdType = 0) {this. items = this. conlist;} else {this. items = [] ;}}}</script> <style> </style>
The result is that when you click content 1, the content of the object appears. Click content 2 and the corresponding content appears. Of course, when I click button 2, the items content is an empty array. $ Route listeners are also used here.
When reusing components and responding to changes in route parameters, you can simply watch (monitor changes) $ route object:
Const User = {template: '...', watch: {'$ route' (to, from) {// responds to route changes ...}}}
Or use the beforeRouteUpdate Guard introduced in 2.2:
const User = { template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() }}
Summary
The above section describes how to solve the problem that two or more menus share one component in vue + webpack development. I hope this will help you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!