route的區(qū)別
理解:
router可以理解為一個容器管理了一組
route是進行當前ULR和組件的映射關系,它包含了很多的屬性和對象(比如history對象),任何頁面都可以調用他的push(),replace(),go()等方法
const router = new Router({
routes: [
{
path: '/',
name: 'home',
component: home,
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/about',
name: 'about',
component: about,
beforeEnter:(to,from,next)=>{
// console.log('路由獨享守衛(wèi)to',to);
// console.log('路由獨享守衛(wèi)from',from);
next()
}
}
]
})
$route是當前激活的路由,包含了當前激活的路由狀態(tài)信息,它包含了當前URL解析得到的信息.
$router對象的屬性
- $router.app: 配置了
router的Vue根實例 - $router.mode: 路由使用的模式
- $router.currentRoute: 當前路由對應的路由信息對象
$router鉤子函數調用順序圖
$router對象方法
$router.beforeEach(to,from,next):是$router的鉤子函數,全局前置守衛(wèi),異步解析執(zhí)行,通常做一些攔截比如:登錄攔截.$router.beforeResolve(to,from,next): 和$router.beforeEach(to,from,next)基本類似,區(qū)別是:$router.beforeResolve(to,from,next)的調用時機是在beforeEach和組件內的beforeRouteEnter之后,afterEach之前調用.$router.afterEach(to, from): 全局后置鉤子他是在路由跳轉完成后觸發(fā)涉枫，參數包括to,from沒有了next,他發(fā)生在beforeEach和beforeResolve之后，beforeRouteEnter之前.$router.push: 編程式導航,使用push方法,會導航到不同的URL,會想history添加新的記錄,$router.replace: 和push很像,區(qū)別是它不會向history添加記錄,會替換當前的history.$router.go(n): 方法的參數是一個整數, 會在history記錄中向前或者后退多少步,和window.history.go(n)類似$router.back(): 編程式導航腐螟，后退一步記錄愿汰，等同于$router.go(-1)。$history.forward(): 編程式導航乐纸，前進一步記錄衬廷，等同于$router.go(1)。-
router.resolve: 解析目標位置,格式和<router-link>的to prop相同锯仪，current是當前默認的路由.使用場景如下:使用
router.resolve自定義一個頁面跳轉的方法Vue.prototype.$linkTo = function ({ path, query, type }) { if (typeof (arguments[0]) != 'object') { // 跳轉路徑 path = arguments[0]; } // 請求參數 query = query || {}; // 跳轉類型 type = type || '_self'; let routeData = router.resolve({ path: path, query: query || {} }) console.log('router.resolve()的返回值：', routeData) window.open(routeData.href, type); }調用
<button @click="$linkTo({ path: '/about'})">去about頁面</button> 點擊這么button后會跳轉到about頁面,resolve的作用就是解析參數成一個完整的url
$route對象屬性
-
$route.path: 返回字符串,對應當前路由的路徑 -
$route.parms: 一個 key/value 對象，包含了 動態(tài)片段 和 全匹配片段趾盐，如果沒有路由參數庶喜，就是一個空對象。 -
$route.query: 一個 key/value 對象救鲤，表示 URL 查詢參數久窟。例如，對于路徑/foo?user=1本缠，則有$route.query.user == 1斥扛，如果沒有查詢參數，則是個空對象丹锹。 -
$route.fullPath: 完成解析后的 URL稀颁，包含查詢參數和 hash 的完整路徑。 -
$route.name: 當前路由的名稱楣黍，如果有的話
