vue-router的两种模式（vue-route路由管理的安装与配置方法）

npm install vue-router --save

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

// 1. 当我们使用其他插件的时候，就必须使用Vue.use安装插件
Vue.use(VueRouter);

// 2. 定义路由，每个路由应该映射一个组件
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
];

// 3. 创建router实例
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,  // (缩写) 相当于 routes: routes
});

// 4. 导出router对象，然后在main.js中引用
export default router;

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

Vue.config.productionTip = false;

new Vue({
  router,  // 在vue实例中添加router对象，就可以使用路由了
  render: (h) => h(App),
}).$mount("#app");

// About.vue
<template>
  <li class="about">
    <h1>About</h1>
  </li>
</template>

<script>
export default {
  name: "About"
}
</script>

<style scoped>
</style>

// Home.vue
<template>
  <li class="home">
    <h1>Home</h1>
  </li>
</template>

<script>

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

<style scoped>
</style>

template>
  <li id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </li>
</template>

<style lang="scss">
</style>

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})