1. <router link>tag to open a new window:
The official document says that the V-link
directive has been replaced by a new & lt; router link & gt; component directive, which has been completed by the component in Vue 2.
Note: <router link>
does not support target = "_Blank "
, if you want to open a new tab, you must use the <a>
tab.
But in fact, vue2 version of <router link>supports target = “_The “blank” attribute (tag = “a”) is as follows:
1 <router-link target="_blank" :to="{path:'/home',params:{id:'8'}}">open home in a new page</router-link>
2. Programming navigation:
Sometimes it is necessary to realize page Jump in click event or function, so you can use the example method of router to realize it by writing code.
What we often use is$ router.push And$ router.go However, after vue2.0, this method does not support the properties of new window opening. This is the time to use this$ router.resolve , as follows
1 goToLoanOrderDetail(loanOrderId, userId) { 2 let routeData = this.$router.resolve({ 3 name: 'orderDetail', 4 params: { loanOrderId, userId } 5 }); 6 window.open(routeData.href, '_blank'); 11 }
Just click the event to call this method
Read More:
- [Solved] Vue-router Error: Navigation cancelled from “/course“ to “/user“ with a new navigation.
- [Solved] Vue route jumps to the same page many times error: Navigationduplicated
- How to React page to achieve entry and exit animation
- Vue refreshes the current page (no flash screen will appear)
- Full screen scrolling by Vue + Vue awesomeswiper
- Vue: How to Solve error avoided redundant navigation to current location: “/xxx”
- Vue: How to Fix “not displaying the holder in IE9 and below”
- Vue a page is mounted to send multiple requests at the same time, and the loading is processed uniformly
- Vue Error: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
- Vue2.0: How to Use vue3 api to encapsulate Axios
- Solving routing errors by rewriting Vue push method
- How to solve Uncaught (in promise) error in VUE?
- Solve the problem of repeatedly clicking the same route console in Vue to report an error
- [Solved] Vue-cli Error: Module not found: Error: Can‘t resolve ‘vue-router ‘
- How to Solve electron import page Error
- How to Solve Vue route jump repeated clicks Error
- How to Solve “Vue is not defined” Error
- “Failed to load resource: net::ERR_FILE_NOT_FOUND” error. The project created by vue-cli 3.0 can run under dev, and an error is reported after packaging, and the page is blank.
- How to Solve VUE Error: Avoid mutating a prop directly since the value will be overwritten …
- [Solved] Vue Project Modify Page Error: CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory