欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

vue cli 路由參數

錢瀠龍1年前8瀏覽0評論

vue-cli是一個基于Vue.js進行快速開發的構建工具,它通過提供默認代碼結構和提供各種工具和插件,簡化Vue.js應用程序的搭建。其中路由是Vue.js應用程序中非常重要的一部分,路由參數則是路由的應用之一。

什么是路由參數?簡單來講,路由參數就是在URL中以冒號開頭表示傳入的參數,在Vue.js中可以通過$router.params取到當前路由的參數值。

const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
name: 'user'
}
]
})
const User = {
template: '<div><h1>User {{$route.params.id}}</h1></div>'
}

以上代碼的作用是:創建一個路由 /user/:id, id 是動態路由參數,該路由對應的組件是 User,并定義了一個 name。

在 User 組件模板內部,可以使用 $route.params.id 訪問路由參數。

在一些場景下,我們需要將這些 router 參數,作為路由當前的 path,這時我們可以通過$route.path來訪問當前路由的 path

const router = new VueRouter({
routes: [
{
path: '/user/:id/',
component: User,
name: 'user'
}
]
})
const User = {
template: '<div><h1>User {{$route.params.id}}</h1><p>Path is: {{$route.path}}</p></div>'
}

從上面的代碼中,可以看到$route.path是變成了 /user/123/,此時通過訪問 $route.path 就可以取到當前路由的路徑信息了。

另外,路由參數還可以通過 $router.replace 傳遞參數,并將路徑更新到路由 history 中。

this.$router.replace({
name: 'user',
params: {
id: 123
}
})

以上代碼意味著,在當前的路由下,要進入 name 為 user 的路由,并攜帶了路由參數 id 為 123。

綜上,路由參數在Vue.js中應用十分廣泛,了解和掌握路由參數的使用方法將有助于我們更好地進行前端開發。