vue2搭配vue-router3真正可用不报错的写法格式

这里要吐槽下vue和vue-router的文档教程

本身前端的版本就多，版本之间还各种不兼容，用法函数还多种多样，一会这个组件一会那里是按普通渲染，简直让人不知道按哪个才是对的。

然后文档里，一会是cdn引入安装的，后面又是npm编译安装的。走了一遍流程各种各样的报错，简直是无语了，不大符合渐进式这个概念。

下面是最基本的结构

 

访问的时候是

域名/ 能正确加载模板

测试路由为 域名/#/login 能正确加载到模板 

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from './components/Login.vue'
import App from './App.vue'
Vue.config.productionTip = false

Vue.use(VueRouter)
const routes = [
  { path: '/login', component: Login },
]

const router = new VueRouter({
  routes
})

const app = new Vue({
    render: h => h(App),
    router
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <div>导航部分</div>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>

./components/Login.vue

<template>
    <div>
        登录页
    </div>
</template>

<script>
    export default {
      name: 'Login',
    }
</script>

<style>
</style>

 package.json

{
  "name": "default",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.6.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "vue-template-compiler": "^2.6.10"
  }
}