Vue.js vue-router的基本用法
阿新 • • 發佈:2018-11-12
安裝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 } ] });