1. 在使用 vue的路由之前需要通过 yarn安装对应的依赖项

yarn add vue-router@3.5.1

2. 导入 vue-router

import VueRouter from 'vue-router'

3. 注册全局组件

Vue.use(VueRouter)

4. 配置验证规则数组

const routes = [{path: '/find', // 路径name: 'Find',  component: Find,  // 组件名},
]

5. 生成路由对象

const router = new VueRouter({routes,  // routes是固定key(传入规则数组)mode: "history" // 默认不写是"hash"
})

 6. 路由对象注入到vue实例中, 可以通过 this访问 $route和 $router

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

7. 使用

<template><div><div class="footer_wrap"><router-link to="/路径"></router-link><router-link to="/路径"></router-link><router-link to="/路径"></router-link></div><div class="top"><!--  设置挂载点-当url的hash值路径切换, 显示规则里对应的组件到这 --><router-view></router-view></div></div>
</template>