【Vue.js】vue-routerでのURLパラメータ使用法
概要
Vue.jsプラグインのvue-routerにおけるURLパラメータの使用法について記述。
定義
vue-router
SPA開発に使用するVue.js公式のプラグイン。
URLパラメータ
URlの末尾に付ける値。
なぜ必要か
ユーザーによって固有のコンテンツを出し分ける為。
実装例
vue-routerの場合は、パラメータとして受け取るURLの末尾に「:パラメータ名」を付ける。
例:todoページへの遷移
path: "/todo/:id"
上記の場合、パラメータ名は「idとなる」。
そしてこの値がrouteの中にparameオブジェクトとして格納される。
$routeはvue専用の変数でルートの情報が入っている。
parameの値は配列になっており、パラメータと値がプロパティとして保存される。
データアクセスは以下の形。
$route.parame.パラメータ名
methodsでログインページからtodoページに遷移する場合の記述。
methods: {
handleLogin(session) {
this.$axios.post('login', session)
.then(res => {
this.login = res.data,
this.$router.push({ path: `/todo/${this.$route.params.id}`})})
.catch(err => console.log(err.status));
}
}
Author And Source
この問題について(【Vue.js】vue-routerでのURLパラメータ使用法), 我々は、より多くの情報をここで見つけました https://qiita.com/soramar/items/12effb243111e8d1ea6c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .