vue-router 路由

1. vue-router实现vue组件之间的交互。会被解析为 a href 。因为VUE是单页面应用，只有主页面一个.html，a 标签跳转页面无用，所以不能用a.
2. route 一条路由， routes 一组路由，router 管理路由
   客户端中的路由：DOM元素的显示或隐藏 -> 基于hash 或者 history (hash 路由页面路径会有#, history 路由页面路径没有#)
3. 一组理解图奉上：
   
4. vue-router 4 代码奉上：

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

createApp(App).use(router).mount('#app');

**App.vue**
<template>
  <div id="app">
    <router-link to="/index">首页</router-link>
    <router-link to="/htmlLearn">第二页</router-link>
    <router-view></router-view>
  </div>
</template>
<script>  
export default {
  name: 'App'
}
</script>

**router/index.js**
//createWebHashHistory Hsah模式 createWebHistory history模式
import {createRouter , createWebHistory} from "vue-router";
import index from '../views/index';

const routes = [
  {
    path: '/index',
    component: index
  },
  {
    path: '/htmlLearn',
    component: () => import ('../views/htmlLearn')
  }
];
const router = createRouter({
  history: createWebHistory(),
  routes,
})
// 将router对象传入到Vue实例
export default router

注意：//createWebHashHistory Hsah模式 createWebHistory history模式
我在做vue-router到时候碰到了很多问题：
“Object.defineProperty called on non-object”
“a plugin must either be a function or an object with an “install” function.”
“"export ‘createRouter’ was not found in ‘vue-router’”，等问题，最后解决办法是写法一定要对应版本，我的写法出现了问题，注意是vue.use(router),还是createApp(App).use(router).mount(’#app’);
注意是import VueRouter from “vue-router”;还是import {createRouter , createWebHistory} from “vue-router”;
我当前的是vue-router 4！！！