很多Vue開發者都會用到to.fullpath
這個屬性,它是Vue-Router中的一個路由對象屬性,可以返回當前路由的完整路徑,包括查詢參數和hash。
在使用router-link
組件時,我們可以設置它的to
屬性值為url字符串或者路由對象。
<!-- url字符串 -->
<router-link to="/foo/bar?baz=qux#quux">Click Me</router-link>
<!-- 路由對象 -->
<router-link :to="{ path: 'foo/bar', query: { baz: 'qux' }, hash: '#quux' }">Click Me</router-link>
當點擊這個鏈接時,Vue會根據to
屬性的值來匹配對應的路由,并且Vue會自動為當前路由對象添加一些屬性,包括fullPath
。
import { useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
console.log(router.currentRoute.value.fullPath);
// "/foo/bar?baz=qux#quux"
}
}
上面的代碼演示了如何在Vue組件中獲取當前路由對象的fullPath
屬性。我們可以通過useRouter
來獲取當前的路由對象,然后在控制臺中打印出fullPath
屬性值。
總的來說,to.fullpath
是Vue-Router中一個十分常用的屬性,可以方便的獲取當前路由的完整路徑,幫助開發者更好的處理路由相關的邏輯。