vue中如何使用vue-route路由插件

本篇文章給大家分享的是有關(guān)vue中如何使用vue-route路由插件，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)是一家專業(yè)提供八宿企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、做網(wǎng)站、HTML5、小程序制作等業(yè)務(wù)。10年已為八宿眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

　　1.vue-Router的使用　　

import Vue from 'vue'
import Router from 'vue-router' //引入路由組件

Vue.use(Router)

new Router({
  mode: 'history', //路由的兩種模式 hash 和history 默認使history模式
  routes: [
  {
   path: '/',
   name: 'home',
   component: () => import(xxx.vue)
  },
  {
   path: '/about',
   name: 'about',
   component: () => import()
  }
 ]
})

　　2.路由的跳轉(zhuǎn)

this.$router.push('/path')

　　　　this.$router.push({name:'routername'})

路由的get方式傳值

this.$router.push({name:'routername',query:{id:xxx}})

路由的post方式傳值

this.$router.push({name:'routername',params:{id:xxx}})

3.路由的后退

this.$router.go(-1)　

　　　　this.$router.back()

4.路由的前進

this.$router.forward()　

5.替換當前路由，在路由歷史中不會再出現(xiàn)該路由

this.$router.replace(location)

6.當前路由的對象屬性(一定要記得是小寫的$route，并且沒有r)

　　this.$route.path   當前路由路徑 path

this.$route.name  當前路由名稱

this.$route.params.id  post方式傳參時，獲取id的值

this.$route.query.id get方式傳參時獲取id的值

this.$route.hash 當前路由的hash值，帶#

7.linkActiveClass

當前激活的路由的class類名，默認是"router-link-active"

8.scrollBehavior　

切換路由時頁面滾動到具體位子

9.router-link 中的tag標簽，生成具體的標簽的html 元素

10.router-view 路由組件具體渲染的地方

11.全部的路由鉤子函數(shù)（導(dǎo)航首位）

11.1router.beforeEach  全局前置首位

11.2router.beforeResolve 全局解析守衛(wèi)

11.3router.afterEach 全局后置守衛(wèi)

11.4beforeEnter 路由獨享守衛(wèi)

組件內(nèi)守衛(wèi)

11.5beforerouteEnter 進入

11.6beforerouteUpdate  更新

11.7beforerouteLeave 離開

/* 全局前置守衛(wèi) */
router.beforeEach(function (to, from, next) {
 // to 將要進路的路由 route
 // from 離開的路由 route
 // next 進入下一個路由，不調(diào)用則不會進入下一個路由
 console.log('全局前置守衛(wèi)')
 next()
})

/* 全局解析守衛(wèi) */
router.beforeResolve((to, from, next) => {
 // to 將要進路的路由 route
 // from 離開的路由 route
 console.log('全局解析守衛(wèi)')
 next()
})

/* 全局后置守衛(wèi) */
router.afterEach((to, from) => {
 // to 將要進路的路由 route
 // from 離開的路由 route
 console.log('全局后置守衛(wèi)')
})
/* 組件獨享守衛(wèi) */
   beforeEnter(to, from, next) {
    console.log('組件內(nèi)獨享守衛(wèi)')
    next()
   }
　beforeRouteEnter(to, from, next) {
  console.log('組件內(nèi)守衛(wèi)進入')
  next()
 },
 beforeRouteUpdate(to, from, next) {
  console.log('組件內(nèi)守衛(wèi)更新')
  next()
 },
 beforeRouteLeave(to, from, next) {
  console.log('組件內(nèi)守衛(wèi)離開前')
  next()
 }

執(zhí)行順序，

1.前組件內(nèi)守衛(wèi)離開

2.全局前置守衛(wèi)

3.路由獨享守衛(wèi)

4.組件內(nèi)守衛(wèi)進入

5.全局解析守衛(wèi)

6.全局后置守衛(wèi)

或者時刷新組件時（/about 跳轉(zhuǎn)到/about?id=1111）

1.全局前置守衛(wèi)

2.組件內(nèi)守衛(wèi)更新

3.全局解析守衛(wèi)

4.全局后置守衛(wèi)

以上就是vue中如何使用vue-route路由插件，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：vue中如何使用vue-route路由插件
本文網(wǎng)址：http://bm7419.com/article38/goeepp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、靜態(tài)網(wǎng)站、建站公司、外貿(mào)建站、網(wǎng)站維護、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站