1. src - router - index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from "@/pages/Home";
import PageNoFound from '@/pages/PageNoFound'

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', component: Home},
    { path: "*", component: PageNoFound}
  ]
});

• vue router는 디폴트로 hash 모드이다.
  • URL 끝에 #이 붙는다.
  • URL이 변경될 때 페이지가 다시 로드 되지 않는다.
• history 모드
  • 페이지를 다시 로드하지 않고 URL을 탐색할 수 있다.
  • SPA이기에 사용자가 직접 user/id에 접속하면 404 오류가 발생한다.

2. NavBar로 화면이동 제어하기

<template>
  <v-app-bar app flat color="white">
    <v-tabs centered color="grey darken-1">
      <v-tab to="/">home</v-tab>
      <v-tab to="/login">로그인</v-tab>
    </v-tabs>
  </v-app-bar>
</template>

<script>
export default {};
</script>

• vutify 사용 Vuetify
• v-tab이 url에 따라 알아서 활성화되는 간편함!!

3. $router, $route

<script>
export default {
	data: () => ({
    text: "",
  }),
	methods: {
    move() {
			// this.$router.push("home");
			// this.$router.push({ path: "home", params: { id: this.text } });
      this.$router.push({ path: "home", query: { text: this.text } });
    },
  },
};
</script>

• export 안에서만 this가 먹힌다.
• query, params로 데이터도 같이 전송 할 수 있다.
  • query는 URL이 /home?text=asdf params는 /home
• 해당 페이지는 아래와 같이 데이터를 받을 수 있다.

<script>
export default {
  data: () => ({
    text: ""
  }),
  created() {
    const { text } = this.$route.query;
    if (text) {
      this.text = data;
    }
  },
};
</script>

• query를 없이 이동할 수 있기에 상황에 맞춰서 구현하자.
• $route로 현재 페이지 url 주소 등을 볼 수 있다