前端開發瀏覽器緩存怎么解決，前端路由與vue-router的基本用法
一、什么是前端路由？
前端路由，即由前端來維護一個路由規則，實現由兩種，一種是利用url的hash，就是常說的錨點，javascript通過hashChange事件來監聽url的改變，IE7及一下需要使用輪詢；另外一種就是HTML5的History模式，它使url看起來像普通網站那樣，以’/’分割，沒有#，但是頁面并沒有跳轉，不過使用這種模式需要服務端支持，服務端在接收到所有的請求后，都指向同一個html文件，不然會出現404，因此，SPA只有一個html, 整個網站所有的內容都在這一個html里，通過Javascript來處理。
前端路由的優點很多，比如頁面的持久性，像大部分音樂網站，你都可在播放歌曲的同事跳轉到別的頁面，而音樂沒有中斷。再比如前后端徹底分離。前端路由更多時候時結合具體的框架來使用，比如Angular的ngouter，React的ReactRouter和vue的vue-router。
二、vue-router 的基本用法
1、在項目根目錄新建一個router，安裝vue-router
npm i --save vue-router
2、在入口文件main.js里面使用Vue.use( )加載插件：
import Vue from ‘vue ’
import VueRouter from ‘vue-router’
import App from ‘./app.vue’
3、每個頁面對應一個組件，也就是對應一個.vue文件。在router目錄下創建views目錄，用于存放所有頁面，然后再views里面創建index.vue 和 about.vue兩個文件：
// index.vue
<template>
<div>首頁</div>
</template>
<script>
export default { }
</script>
//about.vue
<template>
<div>介紹頁</div>
</template>
<script>
export default { }
</script>
4、再回到main.js里，完成路由的配置
const Router = [
{
path: ‘/index’,
component: (resolve) => require([‘./views/index.vue’], resolve)
},
{
path: ‘/about’,
component: (resolve) => require([‘./views/about.vue’], resolve)
}
]
Routers里每一項的path屬性就是指定當前匹配的路徑，component是映射的組件，上例的寫法，webpack會把每一個路由都打包為一個js文件，在請求該頁面時，才去加載這個頁面的js，也就是異步實現的懶加載（按需加載）。
5、然后再main.js里面完成路由的其他配置和路由實例
const RouterConfig = {
// 使用HTML5的history模式
mode: ‘history ’,
routers: Routers
}
const router = new VueRouter(RouterConfig)
new Vue({
el: ‘#app’,
router: router,
render: h => {
return h(App)
}
})
6、配置好了這些后，最后在根實例app.vue里添加一個路由視圖<router-view>來掛載所有的路由組件：
<template>
<router-view></router-view>
</template>
<script>
export default { }
</script>
運行網頁時，<router-view>會根據當前路由動態渲染不同頁面組件，網頁中一些公共部分，比如頂部的導航欄，側邊導航欄，底部版權信息，這些也可以直接寫在app.vue里，與<router-view>同級，路由切換時，切換的是<router-view>掛載的組件，其他內容并不會發生變化。
運行npm run dev 啟動服務，然后訪問localhost:8080/index和 localhost:8080/about就可以訪問這兩個頁面了。
在路由列表里，可以在最后新加一項，當訪問的路徑不存在時，重定向到首頁：
const Routers = [
{
path: ‘*’,
redirect: ‘/index’
}
]
這樣，訪問localhost:8080 就自動跳轉到了localhost:8080/index頁面了。
路由列表的path也可以帶參數，比如個人主頁的場景，路由一部分是固定的，一部分是動態的： /user/123456, 其中id “123456”就是動態的，但它們路由到同一個頁面，在這個頁面里，期望獲取這個id，然后請求相關數據，在路由里可以這樣配置參數：
// main.js
const Routers = [
{
path: ‘/user/:id’,
componet: (resolve) => require([‘./views/user.vue’], resolve)
},
{
path: ‘*’,
redirect: ‘/index’
}
]
// 在router/views目錄下，新建user.vue文件
<template>
<div>{{ $route.params.id }}</div>
</template>
<script>
export default {
mounted () {
console.log(this.$route.params.id)
}
}
</script>
這里的this.$route可以訪問到當前路由的很多信息，可以打印出來看看都有什么，在開發中會經常用到里面的數據。
因為配置的路由是 “/user./id”, 所以直接訪問localhost:8080/user會重定向到/index,需要帶一個id才能到user.vue，比如locahost:8080/user/123456
三、路由跳轉
1、vue-router有兩種跳轉頁面的方式，第一種是使用內置的<router-link>組件，它會被渲染為一個a標簽
// index.vue
<template>
<div>
<h1>首頁</h1>
<router-link to=”/about”>跳轉到about</router-link>
</div>
</template>
它的用法和一般組件一樣，to是一個prop指向需要跳轉的路徑，當然也可以使用v-bind動態的設置。
2、<router-link>還有其他的一些prop，常用的有：
tag:
tag可以指定渲染成什么標簽，比如<router-link to=”/about”tag=”li”>渲染的結果就是li標簽而不是a標簽
replace:
使用replace不好留下History記錄，所以導航后不能用后退鍵返回上一個頁面，如下：
<router-link to=”/about”replace></router-link>
active:
當<router-link>對應的路由匹配成功時，會自動給當前元素設置一個名為router-link-active的class，設置prop: active-class可以修改默認的名稱，在做類似導航欄時，可以使用該功能高亮顯示當前頁面對應的導航菜單項。
四、路由的高級用法
vue-router還給我們提供了路由導航鉤子beforeEach 和 afterEach，它們會在路由即將改變前和改變后觸發。
導航鉤子有三個參數：
to：即將要進入的目標的路由對象
from： 當前導航即將要離開的路由對象
next：調用該方法后，才能進入下一個鉤子
通過這兩個鉤子，可以做很多提升用戶體驗的事情，比如一個頁面很長，滾動到某個位置，在跳轉到另外的頁面，滾動條默認是在上一個頁面停留的位置，而好的體驗肯定是能返回頂部。通過鉤子afterEach就可以實現：
// main.js
router.afterEach((to, from, next) => {
window.scrollTo(0, 0)
})
類似的需求還有，從一個頁面過渡另一個頁面時，可以出現一個全局的Loading動畫，等到頁面加載完成后，再結束動畫。
next() 方法還可以設置參數，比如下面的場景。某些頁面需要校驗是否登錄，如果登錄了就可以訪問，否則就跳轉到登錄頁。這里通過 localStorage來簡易判斷是否登錄，示例代碼如下：
router.beforeEach((to, from, nexxt) => {
if (window.localStorage.getItem(‘token’)) {
next()
} else {
next(‘/login’)
}
})
正確的使用導航鉤子可以方便實現一些全局的功能，更多的可能需要在開發的業務邏輯中不斷的探索。
以上，就是關于vue-router的主要用法，多練習即可掌握。
