Vue路由的下载与使用

 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>