一.Vue3 路由配置
(1). yarn add vue-router
(2) 创建 router/index.js 文件
(3) improt 引入 createRouter
improt { createRouter } from 'vue-router
(4) 调用 createRouter 并定义变量名
cosnt router = createRouter()
(5) export default 导出 router
export default router
(6) createRouter() 内添加对象 并定义 history
history: createMemoryHistory(), //URL不显示路径
history: createWebHistory(), //域名后面不带 # 号
history: createWebHashHistory(), // 域名后面带 # 号
cosnt router = createRouter({
history: createWebHashHistory()})
(7) routes内 path 配置URL显示路径 , component 导入文件
cosnt router = createRouter({
history: createWebHashHistory(),routes:[
{path: '/自定义路径名',component: () => import('../Vue文件') },
{path: '/自定义路径名',component: () => import('../Vue文件') },
]
})
(8) main.js 导入 use注册
import router from './router/index.js'
creatApp(APP).use(router).mount('#app')
(9) Vue主文件内 router-vivw 显示视图 并 router-link 内 to属性指定跳转
router-vivw 介绍: router-vivw是用来承载当前级别下的子级路由的视图标签，作用是显示当前路由内的文件
<template>
<div>
<router-link to="/path路径名"> 点我跳转 </router-link>
<router-vivw> <router-vivw>
</div>
</template>文章来源：https://www.toymoban.com/news/detail-405102.html
二. router/index.js文件 完整代码
文章来源地址https://www.toymoban.com/news/detail-405102.html
到了这里，关于Vue3/ Vue3内 Vue-router Vue3路由 完整配置流程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
