一.Vue3 路由配置
(1). yarn add vue-router
(2) 創(chuàng)建 router/index.js 文件
(3) improt 引入 createRouter
improt { createRouter ?}? from 'vue-router
(4) 調(diào)用 createRouter 并定義變量名
?cosnt router = createRouter()?
(5) export default 導(dǎo)出 router?
export default?router?
(6) createRouter() 內(nèi)添加對象 并定義 history
? ?history: createMemoryHistory(), //URL不顯示路徑
? ?history: createWebHistory(), //域名后面不帶 # 號
? ?history: createWebHashHistory(), // 域名后面帶 # 號
?cosnt router = createRouter({
? ??? ?history: createWebHashHistory()})?
(7) routes內(nèi) path 配置URL顯示路徑 , component 導(dǎo)入文件
?cosnt router = createRouter({
? ??? ?history: createWebHashHistory(),? ? routes:[
? ??{path: '/自定義路徑名',component: () => import('../Vue文件')? },
? ??{path: '/自定義路徑名',component: () => import('../Vue文件')? },
? ]
})?
(8) main.js 導(dǎo)入 use注冊
import router from './router/index.js'
creatApp(APP).use(router).mount('#app')
(9) Vue主文件內(nèi) router-vivw 顯示視圖??并 router-link 內(nèi) to屬性指定跳轉(zhuǎn)
router-vivw 介紹:?router-vivw是用來承載當(dāng)前級別下的子級路由的視圖標(biāo)簽，作用是顯示當(dāng)前路由內(nèi)的文件
<template>
<div>
<router-link to="/path路徑名"> 點我跳轉(zhuǎn) </router-link>
<router-vivw> <router-vivw>
</div>
</template>文章來源：http://www.zghlxwxcb.cn/news/detail-405102.html
二. router/index.js文件 完整代碼
文章來源地址http://www.zghlxwxcb.cn/news/detail-405102.html
到了這里，關(guān)于Vue3/ Vue3內(nèi) Vue-router Vue3路由 完整配置流程的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
