monteecristoo’s blog

https://twitter.com/irakaarozo

vue-router with dynamic router-link

vue-routerのrouter-linkを使ってdynamicなlinkの生成

 方法①

@app.js

const routes = [

  { path: '/user/:userName', component: Profile,
    children: [
      {
        path: '', component: Activity,
      },

      {  
        path: 'follow', component: Follows
      },

      {
        path: 'activity', component: Activity
      }  
    ]
  },

 

@componet

<router-link :to="'/user/' + user.name"><router-link>

 

方法② named-routerを使う

@app.js

const routes = [

  { path: '/user/:userName?', component: Profile,
    children: [
      {
        path: '', component: Activity, name: 'activity'
      },

      {  
        path: 'follow', component: Follows
      },

      {
        path: 'activity', component: Activity
      }  
    ]
  },

 

@componet

<router-link :to= "{ name: 'activity', params: { userName: user.name } }">
</router-link>

 

router-linkのparamのuserNameは通常定数にしないとchromeのコンソール上下記のエラーが出る

app.js:65434 [vue-router] missing param for named route "activity": Expected "userName" to be defined

これを消すにはapp.js側のparameterである:userNameに?を付けてオプショナル扱いにする。

方法②には問題点がある。

/user/userNameでデフォルトでcomponentのActivity.vueを表示させたい場合、

child pathの''にActivityを登録するため

このrouter-linkを辿ると/user/userName/と末尾に/が余分についてしまう。