Vue3--router路由快速上手

createWebHistory-->创建history模式路由【常用】

createWebHashHistory-->创建hash模式路由

createMemoryHistory-->创建内存模式路由【使用频率不高，因为地址会固定到内存中，当刷新页面时会找不到】

createRouter-->创建路由对象

---

目录

1.路由4步入门：

2.总结：

---

 1.路由4步入门：

①引入对象

import {createRouter,createWebHistory} from 'vue-router'

②实例化

export default createRouter({
    history:createWebHistory('/'),
    routes: [
        {path:'/',component:myVideo},
        {path:'/home:id',component:myHome}
    ]
});

③挂载到vue实例

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

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

④router-view

<template>
<router-view></router-view>
</template>

详细深入使用，请参考文档：

vue-router 4.x官方文档

如果应用中遇到：Uncaught TypeError:Object(...) is not a function的错误，请参考我的另一篇文章：

https://blog.csdn.net/qq_42539194/article/details/116954542?spm=1001.2014.3001.5501

2.总结：

Vue3的路由使用和Vue2如出一辙，应该是向着更简单的方向去了，总之还是要弄清流程，以不变应万变。