vue入門 簡單路由配置

2022-03-28 05:01:08 字數 905 閱讀 6425

在初始化vue init webpack 《工程名》時,有一步是詢問是否安裝vue-router,選擇yes,如果沒有安裝的話,後面需要自己安裝。然後在目錄中可以看到有個資料夾叫router:

首先在components裡有多個vue頁面,這裡假設有兩個:helloworld和firstcom。我們剛開始進去的時候顯示helloworld介面:

其中的標籤將按鈕預設渲染成乙個a標籤模式,點選就會跳轉頁面,但不是全部頁面都會變,跳轉後的內容只是被渲染在這裡。所以看上面兩個頁面中,vue的logo同時存在。

js的配置:  開啟router目錄下的index.js檔案,將firstcom元件用import匯入,再在routes中註冊(還是宣告?剛開始學,還分不清楚)元件:

這樣乙個超簡單的路由跳轉就出來了!router中的mode:history表示載入的方式,如果加上這句話,那麼路由跳轉後的鏈結中沒有「#」號,便於瀏覽器搜尋,也比較好看!path:'/'表示路由預設的元件,每次進去都會預設進入到這兒。

特別注意:path與name的順序不能反!!!就是path必須放在最前面,否則就是空白一片!

vue路由配置,vue子路由配置

現在乙個專案已經部署完成,接下來我們從路由開始!還記得在初始化專案的時候,有提示是否需要安裝vue router,對沒錯,vue中路由全靠它!首先找到路由配置檔案 router index.js,是整個專案路由配置檔案 首先看最上面的,這個模組引入,es2015中的import.from.將你需要配...

vue路由配置

1.main.js the vue build version to load with the import command runtime only or standalone has been set in webpack.base.conf with an alias.import vue ...

vue路由配置

1 安裝路由,因為路由是vue的乙個外掛程式。npm cnpm install vue router d2 在main.js中引入路由 import vue form vue import vuerouter from vue router vue.use vuerouter 3 在main.js中...