For the development of the Internet today, IT industry will gradually become the goal of most young people's development, not only good prospects, salary is higher and higher, but web front-end technology industry needs, but also to promote the most friends in learning html5, today small ape circle lecturer for you to share based iview common control router, without wasting time in the process of learning detours.
1, iview the router control requirements
Recently wrote in the use of iview framework project, encountered some problems on the routing control, resolution process also has some experience, so in this record.
Each item in the development, similar to the control requirements Tags (tab) are different, so the first item listed herein, the tab control requirements (if different needs, as herein also may provide some ideas ):
For the same name (name) routing tab can not open more than one. Instance tabs open display of goods from the commodity list, if there is already a commodity in the open edit page, the replacement of the new open, unsaved, saved tabs, and can only be one (i.e., the same name only a route different params);
When replacing a new page, switch back (to cut to another tab and then switch back) by the switchover, it is still the content of the original page (ie the actual recording of params should change after replacing). A similar situation also It should never contain documents saved to save, and save and new features;
2, based on the router control vue
iview vue frame is based, it comes with its own router vue control methods are feasible inevitable.
Vue rerouting common way of reference to the following (the method described in more detail in the official api):
// change the current route (there is a history, it is recommended to use this way)
the this.
router.replace ({
name: 'routername',
routerParam
})
The official route change can indeed normally open tabs, but in the realization of various needs in a mentioned, it does not satisfy some of the demand. For this purpose, reference 3, based on how the outer control iview.
3, based on the router control iview
iview when control route, use vuex in app.js to record the route information tab, if vuex still very understanding, you can be hit by this blog about the foundation.
How to achieve demand 1.1 3.1
Want to achieve the same name in the params iview different route in only one key is to change the method of determining routing iview equal, i.e. '/src/libs/util.js' in the routeEqual Method:
/**
- @description The name / params / query routing determines whether two objects are equal
- @param {*} route1 route object
- @param {*} route2 routing object
* /
Export routeEqual = const (Route1, Route2) => {
return route1.name === route2.name
// here changed by the same route determination mode, i.e. the same as that to the same name
= const params1 route1.params || // {}
// const params2 route2.params = {||}
// const route1.query Query1 = {||}
// const of query2 route2.query || = {}
// return ( route1.name === route2.name ) && objEqual (params1, params2) && objEqual (Query1, of query2)
}
At slightly herein interpreted (if the cause is not concerned directly see 3.2). When the rerouting, 'src \ components \ main \ main.vue' near the top as a component of nearly all global control logic which routes have monitoring:
…
<side-menu
accordion
ref=“sideMenu”
:active-name="$route.name"
:collapsed=“collapsed”
@on-select=“turnToPage”
:menu-list=“menuList”
...
// Methods belonging to this method, to monitor side-menu selection event, i.e. usually logical opening tab from the left menu
turnToPage (route) {
the let {name, the params, Query} = {}
IF (typeof route === 'String') route name =
the else {
name = route.name
the params = route.params
Query = route.query
}
IF (name.indexOf ( 'isTurnByHref_')> -1) {
the window.open (name.split ( '_') [. 1])
return
}
. $ router.push the this ({
name,
the params,
Query
})
},
...
Watch: {
// route change detecting
KaTeX parse error: Expected '}' , got 'EOF 'End of INPUT AT:. ... oute)) the this refs.sideMenu.updateOpenName ( newRoute.name )
}
},
…
Can be inferred from the above code, a logical opening tab main.vue turnToPage achieved by a method, the method does not reflect the notes inside page display changes (including changes in the internal data, hereinafter the same) logic, which is due to changes in display logic, implemented by monitoring the $ router.
In this way, not just open a new tab from the left side of the menu display changes in effect can be achieved, as long as the use of other methods such vue of the original push to change the router's method, can be monitored.
Step through the various methods, which affect the current display tab is 'src / store / module / app.js' of addTag method.
addTag (state, { route, type = ‘unshift’ }) {
let router = getRouteTitleHandled(route)
if (!routeHasExist(state.tagNavList, router)) {
if (type === ‘push’) state.tagNavList.push(router)
else {
if (router.name === homeName) state.tagNavList.unshift(router)
else state.tagNavList.splice(1, 0, router)
}
setTagNavListInLocalstorage ([... state.tagNavList])
}
},
Although the internal method still call a lot, which is a very important judgment, is routeHasExist (routes exist), this method is to determine whether a key node in the same tab (which is also in util.js):
/**
- Determining whether the tag list opens the route already exists newly added objects
* /
Export routeHasExist = const (tagNavList, routeItem) => {
the let len = tagNavList.length
the let = RES to false
doCustomTimes (len, (index) => {
IF (routeEqual (tagNavList [index], routeItem)) RES = to true
})
return RES
}
It can be seen clearly, the call routeEqual this method is actually a method for determining whether the same route (course relatively new route by comparing with the existing route), thus, can only change routeEqual.
Just in case, all method calls this routeEqual of the global search and found all the places called again routeEqual no new problems after the change.
How to achieve demand 1.2 3.2
3.1 after performing the operation, the problem has been partially solved. The remaining problem that needs solving and 1.2 unfulfilled.
The first is, how open or create from the list, replacing the original tab, after switching back and forth will not return to the original tab tab parameters only need to register change of method in app.js in:
// change the specified route parameters
changeTagParams (State, route) {
the let routeOldIndex = state.tagNavList.findIndex (m => routeEqual (m, route))
IF (routeOldIndex! == -1) {
the let routeOld = state.tagNavList [ routeOldIndex]
routeOld.params = route.params
state.tagNavList.splice (routeOldIndex,. 1, routeOld)
setTagNavListInLocalstorage ([... state.tagNavList])
}
},
Then main.vue the monitoring of the $ route to the final quote.
Watch: {
// route change detecting
Katex the parse error: the Expected '}', GOT 'the EOF' End of INPUT AT:. ... oute)) the this refs.sideMenu.updateOpenName ( newRoute.name )
// increase routing link parameter change
this.changeTagParams (newRoute)
}
},
Secondly, if there is like saving and new, or never to save the saved, both of which will not return to the original situation after switching back and forth.
Save and add the key is "new" effect:
// clear the data, the method called after storage
clearData () {
// This section is used to clear the parameters of the current route of
the this. Katex the parse error: the Expected '}', GOT 'the EOF' End of INPUT AT: ... CT. ASSIGN (the this. route.params, {ID: undefined})
})
// this code is used to empty the contents of the current page, each module is different, not necessarily imitate
this.mOtherExpense = JSON.parse (JSON.stringify (this.mOtherExpenseInitial))
this.tableData = [{}]
this.loadCode ()
this.mOtherExpense.openingDate new new = a Date ()
},
Never saved to the saved, the key is how to make the same route in mind that a new id (or other parameters):
// set route id, the method is called after the first save
the setData (ID) {
// ID stored here after coming back from the new ID
the this. Katex the parse error: the Expected '}', GOT 'the EOF' End of INPUT AT: ... ct.assign (. the this route.params, {ID})
})
}
This paper has presented himself iviewrouter common control, or those who have not covered, probably solve the following understanding:
app.js in state.tagNavList is a collection of labels displayed tab; if you want to change something, main.vue the monitoring of the $ route event is initiated beginning, may consider changing from here;
These are the small apes circle web-based front-end lecturer for the introduction of common iview control of router, remember to practice, learn to see more training to learn this is a good start to the new technology, if there is no system can watch video small ape circle, there are better and more complete video.