只需要4步即可在vue2中使用路由router

1、安装

npm install vue-router

2、配置路由

📖在自己工程目录src下新建一个文件夹router，然后新建js文件index.js，并加入以下内容：

在constantRouterMap 里面加路由就行，你随意，我不管！

import Vue from 'vue'
import Home from '@/views/home' 
import Router from 'vue-router'

Vue.use(Router)

export const constantRouterMap = [
    {
        path: '/',
        component: Home,
        children: [
            {path: '/', component: () => import('@/views/home')},
        ]
    }
]

const router = new Router({
    routes: constantRouterMap
})

export default router

3、修改App.vue

💣主要是在 <div id="app">中加上<router-view/>

<template>
  <div id="app">
    <router-view/> 
  </div>
</template>
<script>
  export default {
    name: 'App'
  }
</script>

<style>

</style>

4、使用

💣来到入口文件main.js中，将自己的路由加入到Vue实列中

import Vue from 'vue'
import App from './App.vue'
import router from './router'//看这儿，这个是自己定义的路由路径，别写错了

Vue.config.productionTip = false
new Vue({
  router,//看这儿
  render: h => h(App),
}).$mount('#app')

一个字，巴适！