1.2 Dynamic Route Matching
1.2.1 overview
During actual project development, routes that match certain patterns often need to be mapped to the same component. For example, for the Book component, all books with different ids are rendered using this component. This can be done using dynamic segments in the path, called parameters, which use colons (: ) indicates that, for example: /books/:id, that is, /book/1, /book/2, and /book/foo all map to the same route! When a route is matched, the value of the parameter is saved to this.$router.params (this.$router represents the current route object), which can be used within the component!
1.2.2 Basic Usage
Step 1: Modify the study. vue file
<template> <router-link to="/"> Home </router-link> <router-link to="/news"> News </router-link> <router-link </router-link> <router-link to="/books/1"> </router-link to="/books/2"> </router-link> </router-link to="/videos"> <div>=================</div> <router-view /> </template> <script> export default { el: 'Study' } </script> <style> </style>Copy the codeStep 2: Modify the books.vue file
Script 1: Get parameters in the setup function (this is the script used in this case)
<template> <div> Book page: {{id}}</div> </template> <script> import {useRoute} from 'vue-router' export default { Setup () {const route = useRoute() const {id} = route.params return {id}}} </script> <style> </style>Copy the code$router.params.id = $router
{{$router.params.id}}</div> </template> <script> export default {}</ script> <style>Copy the codeStep 3: Modify the index.js file
import { createRouter, createWebHashHistory } from 'vue-router'
import Study from '.. /views/Study.vue'
import Home from '.. /views/Home.vue'
import News from '.. /views/News.vue'
import Books from '.. /views/Books.vue'
import Videos from '.. /views/Videos.vue'
const routes = [
{
path: '/'.component: Study,
redirect: '/home'.children: [{path: '/home'.component: Home
}, {
path: '/news'.component: News
}, {
// Dynamic route matching
path: '/books/:id'.component: Books
}, {
path: '/videos'.component: Videos
}
]
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
Copy the codeThe fourth step: running results, there is a page does not refresh the problem
Step 5: Listen for route changes in books. vue to resolve the problem
<template> <div> Book page: {{ id }}</div> </template> <script> import { useRoute } from 'vue-router' import { watch } from 'vue' import router from '.. // router/index' export default {// vue 2 的 表 示 : {$route (to, from) { Console. log(' + to.params.id, ') console.log(' + to.params.id, ') console.log(' + to.params.id, ') console.log(' + to.params.id, ') '+ from.params.id)}}, // We get arguments in the setup function, Setup () {const route = useRoute() const {id} = route.params Route.params. id, (currentValue, prevValue) => {console.log('====vue 3 + ====') console.log(' '+ currentValue,' 'prevValue') // When the ID value changes and we manually refresh the page, this may not be a perfect solution for us for now! router.go(0) }) return { id } } } </script> <style> </style>Copy the codeThe sixth step: running results, smoothly realize page jump refresh
Refer to the article, three ways of the Vue page refresh blog.csdn.net/zyplll/arti…
1.2.3 Querying Parameters
An overview of the
The URL with query parameters is of the form /book? Id =1, which is common in traditional Web applications where data is requested from the server based on query parameters. Query parameters in the path are also supported in single page application development!
Step 1: Modify the study. vue file
<template> <router-link to="/"> Home </router-link> <router-link to="/news"> news </router-link> <router-link to="/books? Id =1"> </router-link> <router-link to="/books? Id = 2 "> 2 books < / router - the link > < the router - link to ="/videos "> video < / router - the link > < div > = = = = = = = = = = = = = = = = = < / div > < the router - view / > </template> <script> export default { el: 'Study' } </script> <style> </style>Copy the codeStep 2: Modify the index.js file
import { createRouter, createWebHashHistory } from 'vue-router'
import Study from '.. /views/Study.vue'
import Home from '.. /views/Home.vue'
import News from '.. /views/News.vue'
import Books from '.. /views/Books.vue'
import Videos from '.. /views/Videos.vue'
const routes = [
{
path: '/'.component: Study,
redirect: '/home'.children: [{path: '/home'.component: Home
}, {
path: '/news'.component: News
}, {
path: '/books'.component: Books
}, {
path: '/videos'.component: Videos
}
]
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
Copy the codeStep 3: Modify the books.vue file
Script 1: Get query parameters in the setup function (this is the script used in this case)
<template> <div> Book page: {{ id }}</div> </template> <script> import { useRoute } from 'vue-router' import { watch } from 'vue' import router from '.. // router/index' export default {// vue 2 的 表 示 : {$route (to, from) { Console. log(' + to.query.id, ') console.log(' + to.query.id, ') console.log(' + to.query.id, ') '+ from.query.id)}}, // We get arguments in the setup function, Setup () {const route = useRoute() const {id} = route.query watch(() => route.query. (currentValue, prevValue) => {console.log('====vue 3 ') console.log(' + prevValue, ') '+ prevValue) // When the ID value changes and we manually refresh the page, this may not be a perfect solution for us for now! router.go(0) }) return { id } } } </script> <style> </style>Copy the code$router.query.id = $router.query.id = $router.query.id
{{$router.params.id}}</div> </template> <script> export default {}</ script> <style>Copy the code