Vue3--router路由快速上手
2023-09-27 14:28:48 时间
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如出一辙,应该是向着更简单的方向去了,总之还是要弄清流程,以不变应万变。
相关文章
- 【Vue】Vue3脚手架使用font-awesome字体图标的解决方案
- 【Vue3】Vue3中监视watch和watchEffect使用(图文+代码)
- 【Vue】Vue2和vue3路由的安装及页面切换简单示例(图文+完整源代码)
- antd vue3 图片 手动上传
- 二、trackingjs人脸捕获 vue3
- vue3生命周期详解
- Vue3+elementplus搭建通用管理系统实例十一:动态表单及详情页实现下
- Vue3中的h函数
- 浅析vue3+typescript如何引入外部文件
- vue3中通过ref获取元素节点(系列十一)
- vue3 自定义指令 + 自定义组件 v-loading
- vue2中Options API 和 vue3中Composition API 的对比