Vue3路由配置

路由其实就是一组对应关系，将一个路径与一个组件对应起来，当路径发生变化，路由器就可以通过路由规则，找到当前路径对应的组件，并将该组件呈现到页面上

使用路由步骤：

1.终端输入 npm i vue-router

2.在App.vue中编写导航栏、展示区，并且在components文件夹下面编写可能需要的组件

3.创建路由器，在src文件夹中新建router文件夹，新建index.ts文件

4.在main.ts中引入路由器，原本是创建了应用之后直接挂载（createApp(App).mount('#app')），现在是创建应用之后使用路由器再挂载

这时候就配置好了路由环境，但是当手动改变路径，比如后面加上‘/home’，页面不会出现变化，虽然路由器监测到了地址发生了变化，也找到了一组路由规则，知道了此时的地址对应的组件是Home.vue，但是当他想要把这个对应的组件呈现到页面上时会出现问题，因为它不知道要呈现到哪个位置

5.告诉路由器要把组件放到什么位置

这时候就可以通过手动在路径后面加‘/home’、‘/news’等让展示区呈现不同组件了，但是我们需要点击按钮实现展示区组件的变化，手动改变地址太不方便了

6.通过RouterLink实现点击切换展示效果