createWebHistory-->创建history模式路由【常用】
createWebHashHistory-->创建hash模式路由
createMemoryHistory-->创建内存模式路由【使用频率不高,因为地址会固定到内存中,当刷新页面时会找不到】
createRouter-->创建路由对象
目录
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>
详细深入使用,请参考文档:
如果应用中遇到:Uncaught TypeError:Object(...) is not a function的错误,请参考我的另一篇文章:
https://blog.csdn.net/qq_42539194/article/details/116954542?spm=1001.2014.3001.5501
2.总结:
Vue3的路由使用和Vue2如出一辙,应该是向着更简单的方向去了,总之还是要弄清流程,以不变应万变。