Vue 基本路由的使用

六、重定向設定初識開啟的頁面

七、給路由設定樣式

注意：匯入的包要在vue下邊

>
基本路由的使用title
>
src=
"./lib/vue-2.4.0.js"
>
script
>
src=
"./lib/vue-router-3.0.1.js"
>
script
>

注意：是在vm例項上邊建立

var login =
var register =

建立路由物件，當匯入包之後，在window全域性物件中有路由建構函式–vuerouter，在new路由物件時，可以為建構函式傳遞乙個配置物件。注意1：這個配置物件中的route表示路由匹配規則，每個路由規則，都是乙個物件，這個規則物件都有必須的兩個屬性

1.path，表示監聽哪個路由鏈結的位址

2.component，表示如果路由是前面匹配到的path，則展示component屬性對應的那個元件

注意2：component的屬性值，必須為乙個元件的模板物件，不能是元件的引用名稱

var router =
newvuerouter(,
]})

var vm =
newvue(,
methods:
, router
});

法二：

var vm =
newvue(,
methods:
, router: router
});

由vuerouter提供的元素，用來做佔位符，由路由規則匹配到的元件來展示。

>
"/login"
>
登入router-link
>
"/register"
>
註冊router-link
>
>
router-view
>
div>

注意：router-link預設類似於a標籤

可以利用tag來修改

>
"/login"
tag="span"
>
登入router-link
>
"/register"
>
註冊router-link
>
>
router-view
>
div>

最終頁面結果：

var router =
newvuerouter(,
,],// linkactiveclass: 'myactive' // 和啟用相關的類
})

結果：

開啟頁面就是我們設定的login，包括導航字段址

var router =
newvuerouter(,
,], linkactiveclass:
'myactive'
// 和啟用相關的類
})

.router-link-active, .myactive

結果如下：

vue路由router的基本使用

路由路由是乙個js功能模組，用於解決spa專案元件切換顯示問題的，本身對元件切換的各個底層技術有做封裝，是更成熟元件切換解決方案，使用起來更高階方便。路由是開發spa專案的必備技能。路由封裝的元素有路由實現在專案中安裝路由有兩種方式兩種方式本質完全一樣 vuecli 腳手架建立專案的時候...

vue路由的基本用法

doctype html en utf 8 路由基本用法 title router link active active style js vue.js script js vue router.js script head itany 使用router link元件來定義導航，to屬性指定鏈結ur...

vue路由的，基本用法

第一步安裝路由 npm install router 第二步新建路由，單獨資料夾 1 最好新建router名稱的資料夾，位置放在和pages一起 2 router資料夾下，新建index.js檔案第三步引入需要的外掛程式，和元件，在剛新建的index檔案裡 1 引入vue，和路由router...

Vue 基本路由的使用

vue路由router的基本使用

vue路由的基本用法

vue路由的，基本用法

相關推薦