動態獲取URL在網頁設計中非常有用，可以讓我們在不重新加載網頁的情況下，根據用戶的不同需求動態顯示內容。Vue是一個流行的JavaScript框架，它提供了一種簡單的方式來獲取URL。在本文中，我們將介紹Vue的路由和獲取URL的基本概念，以及如何使用Vue的$route對象來動態獲取URL。

路由是一種將請求與處理程序相匹配的技術。在Web應用程序中，路由機制用于將請求路由到正確的頁面和處理程序。在Vue中，路由是通過Vue Router進行管理的。Vue Router是Vue.js的官方路由插件，可以用于構建單頁應用程序。要使用Vue Router，我們需要先安裝它并引入它的主要組件

npm install vue-router --save
import VueRouter from 'vue-router';
Vue.use(VueRouter);

有了Vue Router，我們就可以創建路由和定義每個路由所對應的組件。在下面的示例中，我們創建了兩個路由，一個指向主頁，另一個指向用戶資料頁面。每個路由都定義了相應的組件。

import HomePage from './components/HomePage.vue';
import UserProfile from './components/UserProfile.vue';
const routes = [
{ path: '/', component: HomePage },
{ path: '/user/:id', component: UserProfile }
]
const router = new VueRouter({
routes
});

現在我們已經定義了路由和組件，下一步是如何獲取URL。在Vue中，我們可以使用$route對象來獲取當前頁面的URL。$route對象是Vue Router提供的全局實例，它包含了當前路由的信息，例如當前路徑、組件等。要使用$route對象，我們首先需要在組件中導入Vue Router。

import { mapGetters } from 'vuex';
import { router } from './router';
export default {
computed: {
...mapGetters(['currentUser']),
isAdmin() {
return this.currentUser.isAdmin;
}
},
methods: {
navigateToHome() {
router.push('/');
}
}
}

在上面的示例中，我們使用mapGetters從Vuex store中獲取當前用戶的信息。然后我們定義了一個isAdmin的計算屬性，用于檢查當前用戶是否為管理員。最后，我們定義了一個navigateToHome函數，該函數通過router.push方法將路由導航到主頁。

我們可以使用$route對象來獲取當前頁面的URL和路由參數。在下面的示例中，我們使用$route.params獲取當前用戶的ID，并將其傳遞給用戶資料頁面組件。

import UserProfile from './components/UserProfile.vue';
export default {
data() {
return {
user: null
}
},
created() {
const userId = this.$route.params.id;
this.user = getUser(userId);
},
components: {
UserProfile
}
}

在上面的示例中，我們在創建階段中使用$route.params來獲取當前URL的ID參數，并使用getUser函數將其傳遞給用戶資料頁面組件。getUser函數是一個虛構的函數，它接受一個ID參數并返回一個用戶對象。

在Vue中，我們可以使用$route對象來動態獲取URL和路由參數。$route對象是Vue Router提供的全局實例，它包含了當前路由的信息，例如當前路徑和組件。我們可以使用$route.params來獲取當前URL的參數，并使用$route.push來實現路由導航。希望本文對您有所幫助。