vue路由學習筆記

解構:

1：用vue官方腳手架生成基本框架

2：安裝vue-router element 

3:導入vue-router和elementui

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import router from './router';



Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

4:view/router/index.vue

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRoutes = [

  {
    path: '/',
    component: () => import('@/views/foo/index'),
  },
  {
    path: '/foo',
    component: () => import('@/views/foo/index'),
  },
  {
    path: '/bar',
    component: () => import('@/views/bar/index'),
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

 

 

 

重定向:

1:路徑,包含name的對象,返回路徑或者而對象的函數

2：

 

組件:props:

1:如果 props 被設置為 true，route.params 將會被設置為組件屬性

路由模式:HTML5 History 模式需要服務端配合？一直沒理解，也沒實際測試過！

基本用法:

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

其中"component" 可以是
// 通過 Vue.extend() 創建的組件構造器，
// 或者，只是一個組件配置對象。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes // (縮寫) 相當於 routes: routes
})

const app = new Vue({
  router
}).$mount('#app')

 當 <router-link> 對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active,可以設置全局CSS樣式修改app.vue里面定義

 

實例對象:this.$route.params.username

this.$router 和 router 使用起來完全一樣 避免每個實例都導入

 

<router-link> 對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active  需要全局設置這個樣式

 

動態路徑參數:   

1:{ path: '/user/:id', component: User }

2:const User = {template: '<div>User {{ $route.params.id }}</div>'}

 

設置多段“路徑參數”

 

當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被復用。

       因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。

不過，這也意味着組件的生命周期鈎子不會再被調用。

 

復用組件時，想對路由參數的變化作出響應的話，你可以簡單地 watch (監測變化) $route 對象或者使用 2.2 中引入的 beforeRouteUpdate 導航守衛：

 

當使用一個通配符時，$route.params 內會自動添加一個名為 pathMatch 參數

{ path: '/', component: UserHome },

{ path: '', component: UserHome },兩個寫法一樣的

 有時候，同一個路徑可以匹配多個路由，此時，匹配的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高。

 

編程式導航 :<router-link> 創建 a 標簽來定義導航鏈接,還可以用編程

router.push(location, onComplete?, onAbort?)

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

// 字符串
router.push('home')

// 對象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

 

如果提供了 path，params 會被忽略

同樣的規則也適用於 router-link 組件的 to 屬性。

 

可選的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回調作為第二個和第三個參數。

<router-link :to="..." replace>

router.replace(...)

這些回調將會在導航成功完成 (在所有的異步鈎子被解析之后) 或終止 (導航到相同的路由、或在當前導航完成之前導航到另一個不同的路由) 的時候進行相應的調用。

 

跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。

 

router.go(n) 這個方法的參數是一個整數，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)。

你也許注意到 router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像， 實際上它們確實是效仿 window.historyAPI 的。

 

命名路由：a鏈接和編程導航寫法

要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
這跟代碼調用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

 

完整的導航解析流程


導航被觸發。
在失活的組件里調用離開守衛。
調用全局的 beforeEach 守衛。
在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。
在路由配置里調用 beforeEnter。
解析異步路由組件。
在被激活的組件里調用 beforeRouteEnter。
調用全局的 beforeResolve 守衛 (2.5+)。
導航被確認。
調用全局的 afterEach 鈎子。
觸發 DOM 更新。
用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

 

 

 

<router-link>

1:默認渲染成帶有正確鏈接的 <a> 標簽，可以通過配置 tag 屬性生成別的標簽 激活自動設置激活類css
2:將激活 class 應用在外層元素,而不是而不是 <a> 標簽本身

<router-link> Props

 

1:to屬性，和router.push()參數一樣 ，內部調用
2：replace 不產生history記錄 <router-link :to="{ path: '/abc'}" replace></router-link>
3：append 當前路徑追加路徑 <router-link :to="{ path: 'relative/path'}" append></router-link> path為相對路徑，最前面不寫/生效
4：tag標簽， <router-link to="/foo" tag="li">foo</router-link> 沒有點擊樣式，但是能相應點擊
5：active-class 激活樣式，默認為"router-link-active" 默認值可以通過路由的構造選項 linkActiveClass設置
6：extact 路徑匹配規則，默認是包含路徑，比如a/b/c,會激活a/b a/b/c路由標簽類名，可以設置全匹配
7：event 字符串或者字符串數組，指定用來激活導航的事件
8：exact-active-class 嚴格匹配時候的類名 默認 router-link-exact-active 可以全局指定

 

 

<router-view>

1:可以配合 <transition> 和 <keep-alive> 使用。如果兩個結合一起用，要確保在內層使用 <keep-alive> 2:可以嵌套 3:可以帶名字

 

 

Router 構建選項

 config設置項  

// 2.6.0+

  caseSensitive?: boolean; // 匹配規則是否大小寫敏感？(默認值：false)
  pathToRegexpOptions?: Object; // 編譯正則的選項  
  其他的一些基礎的選項 就不列舉了path,name,component,alis等

mode:默認值: "hash" (瀏覽器環境) | "abstract" (Node.js 環境)、可選值: "hash" | "history" | "abstract"

base:應用的基路徑。默認為/ 例如，如果整個單頁應用服務在 /app/ 下，然后 base 就應該設為 "/app/"

包含匹配路由激活類 linkActiveClass和 精確匹配的 激活類 linkExactActiveClass 樣式設置