53.vue-router路由

1.在App.vue中写入：

<template>
  <div>
    <!-- vue-router基于路由和组件，路由是用来设定访问路径，将路径和组件映射起来 --> 
    <h1>Hello App!</h1>
    <p>
      <router-link to="/">Go to Home</router-link>
      <router-link to="/about">Go to About</router-link>
    </p>
    <!-- 路由出口，可以叫做一个占位符，路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

2.创建views文件夹：存放路由组件，创建Home和About路由组件。
3.创建router—index.js文件：对路由的路径进行集中管理
（1）引入路由组件

import Home from '../views/Home.vue'
import About from '../views/About.vue'

（2）定义路由表，将路径和路由组件对应匹配。

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

（3）创建路由实例并传递routes配置，
这个routes其实就是上面路由表的routes。
从vue-router中引入createRouter,createWebHashHistory两个方法并使用。

//从vue-router引入这两个方法
import {createRouter,createWebHashHistory} from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

4.在main.js中将实例进行挂载，将router挂载到app上面。
对于index.js和main.js是两个不同的文件，所以：导出、导入
（1）在index.js中先将router导出

export default router

（2）在main.js中先引入router，再挂载到app上。
注意顺序，router在app前面。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'

const app = createApp(App)
app.use(router)
app.mount('#app')

5.显示如下

<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>

router-link被解析为a标签，router-link可以根据你的路径（to属性后面是路径），这个路径就是你在index.js中配置的path，配置为"/“，则当你点击Go Home时，就会去找这个path路径，找到path之后，就会找到”/"后面对应的路由组件的内容。

根据路径来判断到底显示哪个内容，内容是怎么显示出来的，在router-link下有

<router-view></router-view>

它是一个占位符，使用router-view在这里占了位置，然后当匹配到路径之后，发现要展示的是Home路由组件中的内容，那么展示到哪里？就是展示到router-view占的地方，router-view其实也是一个组件。
相当于占位符，占一个位置用来存放路由组件中的内容。