快捷導(dǎo)航

vue之如何配置默認(rèn)顯示頁面和默認(rèn)路由

更新時(shí)間：2023年06月29日 08:39:01 作者：咬緊牙關(guān)i

這篇文章主要介紹了vue之如何配置默認(rèn)顯示頁面和默認(rèn)路由問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue配置默認(rèn)顯示頁面和默認(rèn)路由

在router文件夾中的index.js中配置

const routes = [
    {
        //沒寫就是任意路由都是定向這個(gè)
        path:'',
        //重定向
        redirect:'/xxx'
    }
]

vue中的路由以及默認(rèn)路由跳轉(zhuǎn)

參考網(wǎng)站：Vue Router 。

vue路由配置：

方法一

1、安裝

npm install vue-router ?--save ? / cnpm install vue-router ?--save

2、引入并 Vue.use(VueRouter) (main.js)

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3、創(chuàng)建組件

4、配置路由

5、實(shí)例化VueRouter 注意：名字

6、掛載

整個(gè)main.js

7、根組件的模板里面放上這句話 <router-view></router-view>

8、路由跳轉(zhuǎn)

方法二

1、在main.js中引用

2、在router文件夾中的index.js中配置路由

3、app.vue中添加路由占位符

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3使用withDefaults和defineProps設(shè)置默認(rèn)值的操作指南
文章詳細(xì)比較了Vue3中使用defineProps和withDefaults設(shè)置props默認(rèn)值的優(yōu)缺點(diǎn),defineProps簡潔但代碼臃腫,withDefaults分離定義與默認(rèn)值設(shè)置,提高可讀性,且默認(rèn)值不會丟失,但代碼分散,適用于復(fù)雜組件和動態(tài)生成默認(rèn)值,促進(jìn)代碼復(fù)用和維護(hù),需要的朋友可以參考下
2026-05-05
vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題
這篇文章主要介紹了vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解
今天小編就為大家分享一篇Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
VUE腳手架具體使用方法
這篇文章主要介紹了VUE腳手架具體使用方法，vue-cli這個(gè)構(gòu)建工具大大降低了webpack的使用難度，小編覺得不錯(cuò)，下面就一起來了解一下具體使用方法
2019-05-05
Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能
這篇文章主要介紹了Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能,本文通過截圖實(shí)例代碼說明給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-03-03
Vue?warn:Property?"state"?was?accessed?during
這篇文章主要為大家介紹了Vue?warn:Property?"state"?was?accessed?during?render的報(bào)錯(cuò)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
Vue.js樣式動態(tài)綁定實(shí)現(xiàn)小結(jié)
這篇文章主要介紹了Vue.js樣式動態(tài)綁定實(shí)現(xiàn)小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01
vue3中的ref、reactive問題解析
ref 和 reactive都是vue3推出的針對組合式設(shè)計(jì)的聲明響應(yīng)式狀態(tài)的API,兩者在使用之前都要先進(jìn)行引入,本文通過實(shí)例代碼詳解vue3中的ref、reactive問題,感興趣的朋友一起看看吧
2024-03-03
Vue中使用setTimeout問題
這篇文章主要介紹了Vue中使用setTimeout問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue3頁面加載完成后如何獲取寬度、高度
這篇文章主要介紹了vue3頁面加載完成后如何獲取寬度、高度問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04