Could you tell me how to move the dynamic routing of vue?

as soon as the fool enters the pit, he wants to make a list jump detail. The details page receives a, id (list page, which is used to request the detailed data. Can the boss give a small demo

?
Vue.js javascript
Oct.04,2021

1. Event triggered by details button 

this.$router.push({path: xxx, query: {id: xxx}}) 
this.$router.push({path: xxx, params: {id: xxx}})

2. Routing Settings 

params,xxx/xxx   path: '/xxx/:id' 
query xxx?id=xxx path: '/xxx'

3. Get id on the details page 

this.$route.query.id  this.$route.params.id
id id
It can be found in the documents of

vue-router. In great detail
you can pass values and values in the form of params or query

/ Line Click event
this.$route.push ({name:'app',params: {id:'xx'}})
/ / router.js configuration
{
path:'/ app/:id',
name:'app',
component: resolve = > require (['xxx'], resolve),
}
) something like this.

  1. params pass parameter: this.$router.push ({name:'component',params: {id:'id'}})
    get parameter: this.$route.params.id
  2. query pass parameter: this.$router.push ({name:'component',query: {id:'id'}})
    get parameter: this.$route.query.id

is actually very simple
your details page address for example:
http://codeshelper.com/-sharp/router?id=1
router is your route name, followed by id is your parameter

this parameter value can be found by directly trying this.$router.query.id in the vue page code.

< hr >

you can also write a method to get it. The parameters above are the parameters after hash . What about the parameters after search ?
your details page address for example:
http://codeshelper.com/?id=1-sharp/router

created(){
    this.getQuery('id');
},
methods:{
    getQuery(name){
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(decodeURIComponent(r[2]));
        return null;
    }
}
< hr >

can both

Previous: Some of the styles introduced by webpack4 into CSS, are invalid.

Next: Failed to write a js file to the packaged dist folder using scaffolding configuration fs.writeFile of vue-cli3

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu