On the problem of path value transfer in Vue-Router

according to the official document, if you want to take parameters on url, you can do so 

  Navigation of programmers  "
Vue.js vue-router
Nov.13,2021

this.$router.push ({
path:'/pathname?id='+1+'&name='=2
})

https://router.vuejs.org/zh/a.
documents all read carefully

clipboard.png

simplest:
: to= "/ user/' + id" 

{ name: 'user', params: { id: deviceID }}

this elegance

use template strings to look elegant 

:to="`/user/${deviceID}`"

personally, I think the name jump of the route is better than path, and it is more readable, and there is no need to write a string of addresses. If you have to path, you can only use strings 

:to="{path:`/user/${deviceID }`}"

if you use name, just follow the words "try to learn to smile" upstairs. The example of the official document of reasoning has covered almost all the requirements

.

after reading the answers of so many people, I think it's a good way to use template strings to solve the problem. In addition, the meaning of the existence of name is already very elegant for decoupling. If you find it troublesome to use name, and you have to find a more elegant way to use path, I think you may have some misunderstandings about elegance.

< router-link: to= "{path:'/ user/', params: {id: 123}}" > < / router-link >
if you jump based on the current address, you can add append:
< router-link: to= "{path:'/ user/', params: {id: 123}}" append > < / router-link >

abandoned vue and embraced angular. Of course, it is not just because of routing that angular is a complete "framework". Of course, the most important thing is ts?,. Of course, vue is still in use. After all, the slope of angular is too high

. < hr >

angular routing completely solves my problem 

{ path: 'hero/:id', component: HeroDetailComponent }
<a [routerLink]="['/hero', hero.id]">

ide/router-sharproute-parameters" rel=" nofollow noreferrer "> https://angular.cn/guide/rout.

< hr >

complain about the name field of vue-router. I really can't figure out the meaning of this field. Let me give you an example. 

* console
    * log
* user
    * log
{
    path: 'console/log/:id',
    name: 'log'
},
{
    path: 'user/log/:id',
    name: 'log'
}

if this is the requirement, won't the name values conflict? Okay, you'll say it's the same as the path value, using the hump

. 
{
    path: 'console/log/:id',
    name: 'consoleLog'
},
{
    path: 'user/log/:id',
    name: 'userLog'
}

is that right? But it seems to have solved the demand, but in fact, the hidden danger is even greater. Do you want another one? 

{
    path: '/console',
    children: [
        {
            path: 'device',
            children: [
                {
                    path: 'peripheral',
                    children: [
                        {
                            path: 'log'    
                        }
                    ]
                }
            ]
        },
        {
            path: 'setting',
            children: [
                {
                    path: 'user',
                    children: [
                        {
                            path: 'action',
                            children: [
                                {
                                    path: 'log'
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

what if I need to name two log for a path like this? Or should I name action and peripheral? 

{
    path: 'console/device/peripheral/log'
    name: 'consoleDevicePeripheralLog'
}

do you have to write two lines like this? In the future, there will be more demand and more sub-routes. It is not enough to write a path. If the demand needs to be changed device , I will have to change path and name, respectively. I am afraid of both

.

looking at the ide/essentials/navigation.html-sharp%E7%BC%96%E7%A8%8B%E5%BC%8F%E7%9A%84%E5%AF%BC%E8%88%AA" rel=" nofollow noreferrer "> programmer's navigation in the vue-router document I can't imagine that the combination of path and params is not included in it. Instead, it uses the most primitive string concatenation. Fortunately, es6 has backquotes. Otherwise, it will be even worse.

Previous: The IOS table selectRow method selects cell and does not trigger the didSelectRowAt method

Next: How can iOS get the control instance in storyboard?

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
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e44730-43771.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e44730-43771.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?