前言
Vue3：想通過路由寫2個(gè)頁面，不同的路徑可以進(jìn)入不同的頁面
實(shí)現(xiàn)步驟
1、創(chuàng)建Vue3項(xiàng)目
通過腳手架創(chuàng)建一個(gè)Vue3的項(xiàng)目，然后在此基礎(chǔ)上對(duì)文件進(jìn)行增刪改，修改成自己需要的項(xiàng)目框架
2、views文件夾 對(duì)應(yīng) 頁面文件
- 如果需要寫2個(gè)頁面，則在views文件夾里面創(chuàng)建2個(gè).vue文件
- 可以在.vue文件里面書寫對(duì)應(yīng)的代碼，也可以引入組件：
3、修改路由文件
在router文件夾下的index.js文件里面，書寫每個(gè)頁面文件對(duì)應(yīng)的路徑
-
不同的頁面文件對(duì)應(yīng)的路徑和名字是不同的
-
路由重定向redirect：
執(zhí)行根目錄路由地址時(shí)，跳轉(zhuǎn)執(zhí)行對(duì)應(yīng)的路由地址 ，進(jìn)而把對(duì)應(yīng)的組件給顯示出來
運(yùn)行完項(xiàng)目之后，默認(rèn)會(huì)打開page1的頁面：
-
如果沒有加重定向：
運(yùn)行完項(xiàng)目之后打開的默認(rèn)頁面如下：
4、App.vue文件
- 匹配到路由之后，我們需要把對(duì)應(yīng)的組件渲染到某個(gè)地方，這里我們寫在App.vue文件中
- 在App.vue文件中，需要寫上：
<router-view/>
或者：
<router-view></router-view>
5、輸入不同的路徑進(jìn)入不同的頁面
-
路由代碼如下：
-
運(yùn)行項(xiàng)目后默認(rèn)的頁面如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-668175.html -
修改路徑，進(jìn)入另一個(gè)頁面：
文章來源地址http://www.zghlxwxcb.cn/news/detail-668175.html
到了這里，關(guān)于Vue3：通過路由寫多個(gè)頁面，通過不同的路徑可以進(jìn)入不同的頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
