1. 程式人生 > >Vue.js vue-router的基本用法

Vue.js vue-router的基本用法

安裝vue-router

1、安裝vue-cli

npm install -g vue-cli

2、 安裝vue專案(test是專案名稱)

vue init webpack-simple test

 3、進入專案,安裝包

cd test

yarn install

4、執行專案

npm run dev

5、執行成功則進行 vue-router 的安裝

npm install vue-router --save

接下來我新建了components的兩個元件(省略)和一個router.js檔案

檔案目錄

main.js

import Vue from "vue";
import App from "./App";
import router from "./router/index.js";

new Vue({
  el: "#app",
  template: "<App/>",
  router,
  components: { App }
});

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

新建 router.js 檔案

import Vue from "vue";
import router from "vue-router";
import Login from "./components/Login.vue";
import Register from "./components/Register.vue";

Vue.use(router);

export default new router({
  routes: [
    {
      path: "/",
      component: Login
    },
    {
      path: "/register",
      component: Register
    }
  ]
});