有没有办法我可以在 vue 中获取路由参数答案

【问题标题】：Is there a way i can get a route parameter in vue有没有办法我可以在 vue 中获取路由参数
【发布时间】：2020-06-01 21:57:30
【问题描述】：

我是 vuejs 的新手，我在 laravel 中有我的 api，有一条路线，例如

Route::get('/get-song-details/{id}','SongsController@getSongDetails');。如何在 vue 中获取此 id，以便我只能显示有关所选歌曲的信息。

在下面的示例中，当我通过 1 时，我得到关于歌曲 1 的信息，依此类推。如何让它动态化？

export default {
    data(){
        return {
            songs : []
        }
    },
    created(){
        axios.get('/api/get-song-details/1')
        .then(response => this.songs = response.data);
    }
};
</script>

【问题讨论】：

使用 vue-router！
这能回答你的问题吗？ Accessing $route.params in VueJS

标签： vue.js

【解决方案1】：

假设你使用vue-router，路由组件应该这样声明：

routes: [
  { path: '/song/:id', component: Song }
]

那么在你创建的 Song 组件方法中就可以获取到 id 参数了：

created() {
  axios.get('/api/get-song-details/' + this.$route.params.id)
  ...
}

【讨论】：

【解决方案2】：

所有路由参数都可以通过在JS代码中使用this.$route.params.paramName或在模板中使用$route.params.paramName来访问。 paramName 是您路由器中定义的参数名称。

【讨论】：