Vue的路由Router之導航鉤子和元資料及匹配

一、檔案結構

二、vue.js

開啟此鏈結 

複製貼上頁面的所有內容

三、vue-router.js

開啟此鏈結 　

複製貼上頁面的所有內容

四、index.html

h1>元資料及路由匹配

h1>

1213

<

router-link

to="/"

>首頁

router-link

>

14<

router-link

to="/login"

>登入

router-link

>

15<

router-link

to="/post"

>帖子管理

router-link

>

16<

router-link

to="/a"

>a

router-link

>

1718

19<

router-view

>

router-view

>

20div

>

2122

23<

script

src="../lib/vue.js"

>

script

>

24<

script

src="../lib/vue-router.js"

>

script

>

25<

script

src>

script

>

26body

>

27html

>

1

var routes =[29
},10,16
component:
21},
2229
},30,36
component:,
46children:[
4754}55
]56},57
];58
59var router = new
vuerouter();
6263 router.beforeeach(function
(to,from,next))方法和aftereach(function(to，from){}),
66//
稱為導航鉤子，可以控制訪問許可權和驗證
67//
裡面的**函式可以在路由前和路由後進行操作處理
6869 logged_in = false;70
//方法一：導航鉤子，來進行路由前的驗證
71//
if(!logged_in && to.path == "/post")else
7677
78//
vue提供了乙個matched屬性，得到的是乙個陣列，比如子路由/post/look，就匹配/post/look和/post
79//
console.log("to.matched：",to.matched);
8081
//js陣列有乙個some方法，方法裡可以用**函式，來遍歷處理陣列的每項
82//
to.matched.some(function(item))
8586
//方法一驗證了/post,如果含有子路由，比如/post/look,則沒法驗證，所以必須保證父路由及其後面所有的子路由
87//
都能接受驗證
88//
解決方法：迭代陣列裡的每一項，只要有一項的path是/post,就跳向登入介面
89//
方法二90
//if(!logged_in && to.matched.some(function(item)))else
9798
99//
第二種方法：寫死了，對於乙個頁面(比如/post及其子路由)的驗證是可以的，
100//
但如果有多個路由（比如還有/a），就又得再寫驗證
101102
//方法三：在元件內設定元資料，更靈活
103if(!logged_in && to.matched.some(function
(item)))else
110});
111112
newvue()

七、謝謝**，如有問題，隨時交流哦

VUE中的路由router

vue router是vue.js官方的路由外掛程式，它和vue.js是深度整合的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來。傳統的頁面應用，是用一些超連結來實現頁面切換和跳轉的。在vue router單頁面應用中，則是路徑之間的切換...

vue路由router的實現

1.安裝router 安裝 npm install vue router或cnpm install vue router或yarn add vue router 2.在src目錄下新建乙個router.js檔案引用如下 import vue from vue import vuerouter fro...

vue路由router的基本使用

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