【VueRouter】URLの動的な値を使用する

template内で$route.paramsからURL内の動的な値を参照できる。

<template>
    <h1>User No. {{ $route.params.id }}</h1>
    <!-- ユーザーIDを表示 -->

$route ナビゲーションの情報を得るときに使う
$router ナビゲーションするときに使う

ルート(route)コンポーネントの再利用性を損なわないためのpropsオプション

コンポーネントで $route を使うとコンポーネントとルートの間に密結合が生まれ、コンポーネントが特定の URL でしか使用できないなど柔軟性が制限される。
コンポーネントをルーターから分離するために props オプションを使う。

router.js

export default new Router({　
    mode: "history",
    routes: [
　　　{path: '/', component: Home},
　　　{path: '/users/:id', component: Users, props: true}   // props: trueをつける
　]
});

コンポーネント

<template>
    <h1>User No. {{ id }}</h1>　
 
<script>
export default {
  props: ["id"],   // propsを定義する