VueRouterの使い方

最近学習したVueRouterの個人的まとめ。

VueRouter

プラグインの使い方

import VueRouter from 'vue-router'  

Vue.use(VueRouter)  

historyモード

historyモードでURLの# を消せる

const routes = [  
  {  
    path: '/',  
    name: 'home',  
    component: Home,  
  },  
  {  
    path: '/about',  
    name: 'about',  
    component: () => import('../views/About.vue'),  
  },  
]  

const router = new VueRouter({  
  mode: 'history',  
  routes,  
})  

export default router  

ただし、ローカルの場合はnode.jsが自動的に全てのアクセスをindex.htmlに飛ばしているからいいが、本番環境の場合は自分で設定する必要がある

router-viewでURLにしたがって中身はviewsディレクトリ以下のコンポーネントに動的に切り替わる。

router-linkで画面遷移する。

<div id="app">  
  <nav>  
    <router-link to="/">Home</router-link> |  
    <router-link to="/about">About</router-link>  
  </nav>  
  <router-view />  
</div>  
  • active-class URL以下がactiveの時にクラスを適応
  • exact そのURLがドンピシャでactiveな時クラスを適応
    <div id="app">  
    <nav>  
      // /usersでも/users/:idでも.active-linkを適応  
      <router-link to="/users" active-class="active-link">  
      // /usersのみ  
      <router-link to="/users" active-class="active-link" exact>About</router-link>  
    </nav>  
    <router-view />  
    </div>  
    .active-link {  
    font-size: 2rem;  
    }  

javascriptでURLを切り替える

$routeインスタンスに追加してあげる。

// '/aboutに行く'  
this.$router.push('about')  

paramsの取り出し方

$route.params.id でparamsを取り出せる

idごとに処理を変える

users/:id ではUsers.vueコンポーネントを使い回す
idごとに切り替えたい場合はwatchを使う

export default {  
  watch: {  
    $route(to, from) {  
      console.log(from)  
      console.log('$routeが変わった')  
      console.log(to)  
    },  
  },  
}  

コンポーネントをネストする

router-viewの中のrouter-viewは動かない

  • propsオプションでparamsを動的にできる
  • childrenオプションでrouter-viewが使えるように
path: '/users/:id',  
props: true, // idをpropsで受け取れる  
children: [  
  { path: 'posts', component: () => import('../views/UsersPosts.vue') }, // /users/:id/posts  
  { path: 'profile', component: () => import('../views/UsersProfile.vue') }, // /users/:id/profile  
],  
name: 'users',  
component: () => import('../views/Users.vue'),  
// router/index.js  
{  
  path: 'profile',  
  component: () => import('../views/UsersProfile.vue'),  
  name: 'users-id-profile',  
},  

// Users.vue  
<router-link :to="'/users/' + (Number(id) + 1) + '/profile'">  
  次のユーザー  
</router-link>  
<router-link  
  :to="{  
    name: 'users-id-profile',  
    params: { id: Number(id) + 1 },  
    query: { lang: 'ja', page: 2 },  
  }"  
>  
  次のユーザー  
</router-link>  

名前付きView

// App.vue  
<router-view name="header" />  
<router-view />  

// router/index.js  
{  
  path: '/',  
  name: 'home',  
  components: {  
    default: () => import('../views/Home.vue'),  
    header: () => import('../views/HeaderHome.vue'),  
  },  
},  

リダイレクト処理

{  
  path: '/users',  
  redirect: '/users/1',  
},  
{  
  path: '*',  
  redirect: { path: '/' },  
},  

scrollの挙動を設定する

const router = new VueRouter({  
  mode: 'history',  
  routes,  
  scrollBehavior(to, from, savedPosition) {  
    if (savedPosition) {  
      return savedPosition  
    }  
    if (to.hash) {  
      return {  
        selector: to.hash,  
        offset: { x: 0, y: 100 },  
      }  
    }  
    return { x: 0, y: 0 }  
  },  
})  

beforeEachガードとbeforeEnterガード

ページ遷移前に特定の処理を実行する

// 全ページ main.js  
router.beforeEach((to, from, next) => {  
  if (to.path === '/users/1') {  
    next('/')  
  }  
  next()  
})  

// 特定のページ router/index.js  
const routes = [  
  {  
    path: '/',  
    name: 'home',  
    components: {  
      default: Home,  
      header: () => import('../views/HeaderHome.vue'),  
    },  
    beforeEnter(to, from, next) {  
      next(false)  
    },  
  },  
}  


// コンポーネントにもナビゲーションガードが指定できる  
export default {  
  beforeRouteEnter(to, from, next) {  
    next(vm => { // vm == $route  
      console.log(vm.id)  
    })  
  },  
  beforeRouteUpdate(to, from, next) {  
    console.log('beforeRouteUpdate')  
    next()  
  },  
  beforeRouteLeave(to, from, next) {  
    const isLeave = confirm('本当にこのページを離れますか?')  
    if (isLeave) {  
      next()  
    } else {  
      next(false)  
    }  
  },  
}  

遅延ローディング

() => import() を使うことで必要になった時だけ、サーバ側からコンポーネントを持ってくる

// こうではなく  
import Home from '../views/Home.vue'  
// こう書く  
const Home = () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')  
// webpackChunkNameでjsファイルの名前を指定