vue 路由的基本使用

1.vue中路由的使用步骤
1.1下载依赖包

yarn add vue-router

1.2导入路由

import VueRouter from 'vue-router'

1.3使用路由插件

在vue中，使用使用vue的插件，都需要调用Vue.use()
Vue.use(VueRouter)

1.4 规则数组

const routes = [
  {
   
    path: "/find",
    component: Find
  },
]

1.5 创建路由对象-传入规则

const router = new VueRouter({
   
  routes
})

1.6 关联到路由实例

new Vue({
   
  router
})

1.7components换成router-view

<router-view></router-view>

2.vue路由-声明式导航
目的：可用全局组件router-link来代替a标签使用

1. vue-router提供了一个全局组件 router-link
2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
3. router-link提供了声明式导航高亮的功能(自带类名)

<template>
  <div>
    <</