从 VUEJS 中的 url 获取 ID答案

【问题标题】：Get the ID from the url in VUEJS从 VUEJS 中的 url 获取 ID
【发布时间】：2020-09-08 18:41:52
【问题描述】：

我目前正在学习 VUEJS，对此我完全陌生。所以我需要帮助。我想从 URL 中获取 ID，例如：

网址：

abc.net/dashboard/a/123456789

我想要文本格式的123456789。

【问题讨论】：

标签： vue.js vuejs2 vuejs3

【解决方案1】：

这可以通过普通的 javascript 轻松完成

const url = window.location.href;
const lastParam = url.split("/").slice(-1)[0];
console.log(lastParam);

如果您使用的是 vue-router 并且您加载的页面是在 router.js 中定义的。然后简单调用this.$route.params

【讨论】：

【解决方案2】：

如果您使用的是vue-router，这可以为您提供指导

import Vue from 'vue';
import VueRouter from 'vue-router';
import DashboardComponent from "./path/DashboardComponent";

Vue.use(VueRouter);


export default new VueRouter({
    routes: [

        { path: '/dashboard/a/:id', component: DashboardComponent }//where :id is the dynamic id you wish to access from the browser
    ]
})

在你的DashboardComponent

<template>
   <div> 
       {{id}} //this will show the id in plain text
   </div>
</template>

<script>
    export default {
       name: 'Dashboard',

       data(){
           return {
              id: this.$route.params.id //this is the id from the browser
           }
       },
    }
</script>

【讨论】：