TIL52.Vue Router

라우터

라우터 객체 생성하기

뷰 라우터를 사용하려면 이 속성으로 뷰 라우터 객체를 넘겨줘야 한다.

// 1.main.js

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

new Vue({
 el: "#app",
 render: h => h(App),

 // 라우터 객체를 넘겨준다
 router,
})

//2.routes.js
mport Vue from "vue";
import VueRouter from "vue-router";
import Home from "./components/views/Home";
import Vmodel from "./components/learning/Vmodel";

//뷰 라우터는 플러그인 형태이기 때문에 Vue.use() 함수를 이용해서 등록한다
Vue.use(VueRouter);

//VueRouter 클래스 함수로 라우터 객체를 생성한다
const router = new VueRouter({
  mode: "history",
  routes: [
    { path: "/", component: Home },
    { path: "/Vmodel", component: Vmodel },
  ],
});

export default router;

라우터 뷰

이제는 라우터를 이용해 출력될 부분을 입력해야하는데, 루트 컴포넌트인 App.vue에 라우터 뷰를 추가하면 된다. router-view태그를 사용하면 경로에 따라서 그에 맞는 컴포넌트를 렌더링해준다.

<template>
  <div id="app">
    <div class="content">
      //이곳에 라우터가 컴포넌트를 그린다
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

*react router와 비교

//index.js
import React from "react";
import ReactDOM from "react-dom";
import Routes from "./Routes";
import "../src/Styles/common.scss";
import "../src/Styles/reset.scss";

ReactDOM.render(<Routes />, document.getElementById("root"));

//routes.js
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import ProductList from "./Pages/ProductList/ProductList";
import ProductDetails from "./Pages/ProductDetails/ProductDetails";
import Navbar from "./Components/Navbar/Navbar";

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Navbar />
        <Switch>
          <Route exact path="/ProductList" component={ProductList} />
          <Route exact path="/ProductDetails/:id" component={ProductDetails} />
        </Switch>
      </Router>
    );
  }
}

export default Routes;