How to use vue-router to realize Route Jump and Parameter acquisition in Vue3
Today, I would like to share with you how to use vue-router to achieve route hopping and parameter acquisition in Vue3. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.
Vue-router implements route hopping and parameter acquisition import {defineComponent, onMounted, reactive, readonly, ref} from 'vue';import {useRouter, useRoute} from' vue-router';export default defineComponent ({name: 'Login', setup () {const router = useRouter (), route = useRoute () Const submitForm = () = > {formRef.value?.validate ((valid) = > {if (valid) {login ({strategy: 'local',... ruleForm}). Then (res: any) = > {/ / get parameters and route jump const redirect: string = route.query & & route.query.redirect If (redirect) {router.replace (redirect);} else {router.push ('/ home');} return true;}) .catch ((e) = > {...});} else {. Return false;}});}; return {..., submitForm};}}); summary of the three methods of route hopping
1. Route setting method
{`insert the code chip `path:'/ detail/:id', name: 'detail', meta: {keepAlive: true}, component: () = > import ('.. / pages/detail/index')} here
2. Route hopping mode
This.$router.push ({path: `/ detail/ 1`})
3. How to obtain parameters
Let detailId = this.$route.params.id
Note: params passing parameters is equivalent to something that must be passed as part of the route. After verification, if the page is not passed, it will jump to a blank page.
In this way, the page refresh id is not lost.
II. The second kind
1. Route setting method
{path:'/ detail/:id', name: 'detail', meta: {keepAlive: true}, component: () = > import ('.. / pages/detail/index')}
2. Route hopping mode
This.$router.push ({name: 'Detail', params: {id}})
3. How to obtain parameters
Let detailId = this.$route.params.id
Note: the id in the routing setting method can be passed or not, and the id will be lost if the refresh page is not passed.
In this way, the page refresh id is not lost.
Third, the third kind
1. Route setting method
{path:'/ detail', name: 'detail', meta: {keepAlive: true}, component: () = > import ('.. / pages/detail/index')}
2. Route hopping mode
This.$router.push ({path: 'Detail', query: {id}})
3. How to obtain parameters
Let detailId = this.$route.query.id
Note: the id in the routing setting method cannot be written because it is part of the router, so the match will not be matched, and the refresh page id will not be lost in this way.
Http://localhost:8080/#/detail?id=1
These are all the contents of the article "how to use vue-router to achieve route hopping and parameter acquisition in Vue3". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
