vue router

routerの初期設定

npm install vue-router

srcファイルにrouter.jsを作る

main.jsでrouterのインポート登録

router-viewの記述

active-class
exact

ボタンでurlの移動
this.$router.push('users');

動的にurlを操る
コロンをつける
path:'/users/:id'

idにアクセスする
{{$route.params.id}}

props:true
props:["id"]
で、idだけで表示できるようになる

childrenでrouter-viewをネストすることができる

v-bindで動的にurlを変える

<router-link :to="'/users/'+(Number(id)+1)+'/profiles'">

名前月つきルートを使う

<router-link :to="{name:'users-id-profile',params:{id:Number(id)+1}}">次</router-link>

{path:"profiles",component:UsersProfiles,name:"users-id-profile"},

名前をつけると、同じページでいろんなrouter-viewが使える

routes:[
    {
        path:'/',components:{
        default:Home,
        header:HeaderHome
    }

名前つきrouter-viewを使うときはpropsをオブジェクトにする

 props:{
            default:true,
            header:false
        }