路由 Vue-router 基本使用

1.vue-router 是基于路由和组件的

 ☑️ 路由用于设定访问路径，将路径和组件映射起来，

 ☑️ 在vue-router 的单页面应用中，页面的路径的改变就是组件的切换。

2.如果想在当前页面使用路由

1⃣️：安装Vue Router,在终端输入以下命令，点击回车

npm install vue-router@4

 2⃣️：在到package.json 是否安装成功

3⃣️： 新建一个router 文件，配置对应的路由与组件的映射关系

      倒入对应的组件

       配置对应的映射关系：创建一个数组，数组里面放上一个个映射的路由对象

//4.倒入路由库，和对应的路由模式
import { createRouter, createWebHashHistory} from 'vue-router';
// 1.倒入对应的组件
import headers from '../ceshi/headers.vue';
import mains from '../ceshi/mains.vue'
// 2.配置映射关系
const routers=[
{ path:"/headers",name:"headers",component:headers},
{ path:"/mains",name:"mains",component:mains}
]
// 3.创建路由对象 router
const router=createRouter({
    // 映射关系已经放到路由对象里面了
    routers,
    history:createWebHashHistory()
})
//5.导出这个路由对象
export default router

4⃣️：在main.js里面安装这个路由对象

 5⃣️：在app.vue 使用router-view 进行占位，到时候匹配到对应的路由就会显示对应的位置了。

6⃣️：router-link 的使用

<div id="app">
  <router-link to="/headers">头部</router-link>
  <router-link to="/mains">内容</router-link>
<router-view/>
</div>