Vue-router 的简单配置和使用

• main.js

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

window.vm = new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

• router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// routes 最好根据用户权限动态生成
const routes = [];

const router = new VueRouter({
  routes,
});

export default router;

• App.vue

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

• views/MainPage.vue

<template>
  <div class="router-wrapper">
    <h1>主页面</h1>
    <router-link to="/login">登录页</router-link>
    <router-link to="/bootstrap">Bootstrap</router-link>
    <router-link to="/lazyload">图片懒加载</router-link>
  </div>
</template>