vue路由

vue// 步驟1：引入vue.js和vue-router.js庫

　　　// 步驟2：建立組件 Vue.component 或簡寫 {template:HTML代碼}

// 步驟3：聲明組件路由 new VueRouter

//步驟4：在new Vue裏面註冊激活路由

// 步驟5：挖坑顯示 <router-view />

 

//path：路徑，

// name：標識後期跳轉使用

// component：加載組件，

// redirect：路徑用來重定向跳轉

// alias：別名 就是有兩個網址

跳轉頁面

<router-link to='/' >內容</router-link>

 

 

路由就是網址

路由參數就是網址參數

根據路由參數的不一樣顯示不一樣的內容不一樣的組件

 

 

路由重定向是利用了

 

new VueRouter({

routes: [

{path,'路由網址 /:穿參的參數名'

name, 名字

component 對應的組件

redirect 跳轉到指定網頁

, alias 別名

}

....

]

})

 

多學一招：path裏面能夠經過*通配my-*

匹配my-開頭的路由*

匹配全部路徑

• 組件使用（在HTML中）：{{ $route.params.參數名}}
• 組件使用（在 JS中）：this.$route.params.參數名

 

created 監聽第一次路由的變化

beforeRouteUpdate (newData, oldData, next) {

// react to route changes...

// don't forget to call next()

// next() 向下匹配

}

 

你說下vue路由模式有幾種

2種，分別是hash、history （注：mode）

你說下vue路由原理？

是這樣的

vue路由是基於單頁面應用SPA思想/規則實現的

原理呢

基於BOM的location和history實現的

hash

location.hash = 值

location.onhashchange = 處理函數

​

history

history.pushState = 值

history.onpopstate = 處理函數

那你說下什麼是單頁面應用SPA，有點缺點

單頁面應用是一個思想/規則，

主要規定頁面局部刷新，從而減小HTTP請求 加快頁面響應速度，提升用戶體驗度

有個缺點：不利於SEO優化（注：seo百度可以找到你）

注：這個技術能夠解決vue 單頁面應用 seo優化問題 nuxt.js

https://zh.nuxtjs.org/guide

 

 

什麼是動態路由匹配：監控路由參數變化

應用場景：商品詳情頁 根據路由參數獲取最新數據

語法：從手冊複製

 

鑲嵌路由是指父鑲嵌子

父挖坑埋子

默認監聽範圍埋父

 

 

 

視圖路由指同級顯示多個路由