关于Vue-Router中的path传值问题

Question

按官方文档的说法，想在url上带参数的话可以这样

{
    path: '/user/:id'
}

然后打开

'/user/213'

就能打开相应的页面了，但是现在有需求是要通过:to来实现，官方教程只有

:to="{name: 'user', params: {id: 123}}"

这样的教程。

我理想中的是这样

:to="{path: '/user/:id', params: {id: 123}}"

我现在的方法是

:to=" '/user/'+ deviceID "

请问有什么办法可以解决, 不能更优雅了吗

---

现在接触了angular之后，发现angular的路由传参才是最符合我想要的逻辑的

{ path: 'hero/:id', component: HeroDetailComponent }

<a [routerLink]="['/hero', hero.id]">

https://angular.cn/guide/rout...

不知道vue-router有没有计划能够做成这样，拼接字符串终归算不上是文档里意义上的"编程式的导航"

Answer 1

抛弃vue了，拥抱angular的怀抱。。当然并不是仅仅因为路由的问题，angular才算是一个完整的“框架”，当然最重要还是有ts?，当然vue还是在用，毕竟angular上手坡度太高

---

angular的路由完全解决了我的问题

{ path: 'hero/:id', component: HeroDetailComponent }

<a [routerLink]="['/hero', hero.id]">

https://angular.cn/guide/rout...

---

抱怨一下vue-router的name字段，实在想不通这个字段存在的意义，举个?

* console
    * log
* user
    * log

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

假如是这样的需求，name值不就冲突了吗？好你们会说和path值写的一样，用驼峰

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

这样对吧？但是看似解决了需求，其实隐患更大，再来一个?

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

这样的路径我需要给两个log命名怎么办？，或者我为action和peripheral命名呢？

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

类似这样都要写两行么？以后需求多了，子路由更多，写了一个path还不够还要写词name，如果需求要改device换了，结果我还要分别去改path和name，想想都怕

看着vue-router文档中的编程式的导航我实在想不通path与params的结合居然不算在里面，还是用了最原始的字符串拼接，好在es6有了反引号，不然更难受。

Answer 2

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

Answer 3

https://router.vuejs.org/zh/a...
文档都有 仔细阅读一下

Answer 4

最简单的：
:to="'/user/' + id"

Answer 5

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

这个优雅呀

Answer 6

使用模版字符串看起来优雅一点

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

Answer 7

个人觉得路由的name跳转比path更好，可读性也高，不用写一串的地址。一定要path的话就只能用字符串了

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

使用name的话，按楼上‘努力学会微笑’说的做就好了，讲道理官方文档示例已经覆盖了几乎所有的需求了吧

Answer 8

看了这么多人的回答，我觉的使用模板字符串能够解决问题，也算是不错的方法了。另外 name 存在的意义，本来就是为了解耦，已经算是很优雅了。如果你觉的使用 name 很麻烦，而要用 path，还要再寻找一种更优雅的方式，我觉的你可能对优雅有一些误解。

Answer 9

<router-link :to="{path: '/user/', params: {id: 123}}"></router-link>
如果基于当前地址跳转，可以加append：
<router-link :to="{path: '/user/', params: {id: 123}}" append></router-link>