在Vue中,router(路由)用于管理頁面之間的跳轉(zhuǎn)。在跳轉(zhuǎn)到另外一個頁面時,有時需要傳遞參數(shù)或者從上一個頁面獲取一些信息。在這種情況下,可以使用Vue的router來取值。
//router的導(dǎo)入和初始化 import VueRouter from 'vue-router'; Vue.use(VueRouter) const router = new VueRouter({ routes:[ { path: '/user/:id', name: 'user', component: User } ] }); //從路由中取值 export default { name: 'User', methods: { getUser() { const userId = this.$route.params.id; //使用獲取的userId進行后續(xù)操作 } } }
在上面的代碼中,我們先導(dǎo)入Vue的router,并對其進行初始化。這包括添加路由,設(shè)置路由的名稱和關(guān)聯(lián)的組件(在這里是User)。在這個路由中,我們使用冒號(:)來表示參數(shù),參數(shù)名為id。這意味著我們可以在路由中添加像/user/123這樣的路徑,其中"123"是動態(tài)的參數(shù)值。在該路由下跳轉(zhuǎn)時,這個參數(shù)會被傳遞給User組件。
在User組件中,我們使用Vue的$route屬性來訪問路由信息。在我們的例子中,我們從$route中獲取動態(tài)id參數(shù)的值,并將其存儲在一個叫做userId的變量中,以便稍后使用。
//從路由中獲取query參數(shù) export default{ methods: { search() { const search = this.$route.query.search; //使用獲取的search值進行搜索操作 } } }
除了參數(shù)之外,我們還可以從路由中獲取查詢參數(shù)(query parameters)。這些參數(shù)用于在URL中傳遞附加信息,例如搜索詞,分頁數(shù)或排序順序。在URL中,查詢參數(shù)以"?key=value"的形式出現(xiàn),可以在路由中獲取。
在上面的代碼中,我們在User組件中定義了一個叫做search的方法,該方法從$route.query中獲取名為search的查詢參數(shù)。這個方法返回search參數(shù)值,以便進行進一步的搜索操作。
總的來說,Vue的router使得從URL中獲取參數(shù)和查詢參數(shù)變得非常容易和方便。這樣,我們就可以根據(jù)需要動態(tài)地獲取URL中的值,從而達到更加靈活的頁面跳轉(zhuǎn)目的。