vue-router作為vue里面最基礎的服務,學習一段時間,對遇到的需求進行一些總結

使用vue-cli作為開發前提 vue-router已經配置好了

路由寫法

 routes: [  {    path: '/cart',    name: 'cart',    component: cart,    meta :{ title: "購物車"}        //用于給定網頁名  } ]

vue-router 的路由跳轉的方法

第一種 : 編程式的導航

<router-link to="/" tag="p">耳機頻道</router-link>//to是一個prop.指定需要跳轉的路徑,也可以使用v-bind動態設置//tag可以指定渲染成標簽,默認是a標簽<router-link to="/" replace>跳轉回去</router-link>  //這樣的寫法是不會留下歷史痕跡,回退鍵無效<router-link :to="{ name: 'product', params: { id : 1 }}">User</router-link>// /product/1

第二種 : 函數式的導航

//這里假設 我要跳轉product頁面并且附帶參數id //這里定義好了list.id 就是 動態的值this.$router.push('./product/' + list.id)            // 字符串的方式進行描述this.$router.push({name : 'product',params: { id : list.id }})  // 命名的路由的方式進行描述this.$router.push({ path: `/product/${list.id}` })        // 直接定義path類似第一種//比較常用的跳轉路由的方法//假如是帶查詢參數router.push({ path: 'product', query: { id: list.id }})      // /product?id=1

這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

當你點擊 <router-link> 時，這個方法會在內部調用，所以說，點擊 <router-link :to="..."> 等同于調用 router.push(...)。

值得注意的一點是,如果提供了 path，params 的配置將不會生效

還有一些方法

router.replace   //它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄router.go(1)    //在瀏覽器記錄里面前進一步,等于history.forward()router.go(-1)    //后退一步記錄，等同于 history.back()router.go(n)    //瀏覽器記錄前進3步

基本使用大概就這么多

 還有 命名視圖 路由重定向 等等需要的請看官網

基本知識大概就這么多

現在說說正題 afterEach beforeEach這兩個導航守衛的區別

正如其名，vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全局的, 單個路由獨享的, 或者組件級的。

記住參數或查詢的改變并不會觸發進入/離開的導航守衛。

在全局守衛里面

beforeEach 全局前置守衛

當一個導航觸發時，全局前置守衛按照創建順序調用。

每個守衛方法接收三個參數：

•to: Route: 即將要進入的目標 路由對象