View-router

インストール。通常 module システムの中で使うことになると思うので、use で宣言してから使用すること。

router/index.js etc...

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

routing を設定する。

router/index.js etc...

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/nologin',
    name: 'Nologin',
    component: NoLogin
  },
  {
    path: '/index',
    name: 'Index',
    component: Index,
  }
]

// name をつけておくと、
// this.$router.push({name: 'route-name'}) で移動できて便利

router/index.js etc...

const router = new Router({
  routes: routes
})

// 以下でもいい
const router = new Router({
  routes
})

module を出力する。

router/index.js etc...

export default router

router を注入

main.js ...etc

import Vue from 'vue'
import App from './App'
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, // router をかます
  components: { App },
  template: '<App/>'
})

注入して入れば、router-view コンポーネントして自動的に使える模様。

app.vue ...etc

<template>
  <div>
    <router-view/>
  </div>
</template>

etc.vue

export default {
  computed: {
    username () {
      // 多分これで url のクエリのうち username が取れる
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      // this.$router で history オブジェクトの操作にも
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}