vue-router 是Vue.js 官方的路由庫。這篇文章主要介紹了vue-router專案實戰總結,需要的朋友可以參考下
今天來談談vue專案{ vue,vue-router,component}三大神將之一的vue-router。作為我們前後端分離很重要的實踐之一，router幫我們完成了SPA應用間的頁面跳躍。
並且，配合axios這樣的第三方函式庫，我們可以實作配合後台介面的攔截器功能。
對於一個小型專案而言,router這個資料夾裡面就包含了一個router.js就足夠了，
但是，當我們的頁面比較多的時候，我們就需要分出兩個檔案出來：一個定義我們的路由和元件，另一個實例化元件，並將路由掛載到vue的實例上。
基本的用法就不多贅述，大家可以看vue-router的官網，認真過一遍的話，基本使用肯定沒什麼問題。
1.為什麼我的路由不起作用?
這裡有個很重要的一點就是當我們去建構VueRouter的實例的時候，傳入的參數的問題。
import routes from '@/router/router'
const router = new VueRouter({
routes // （ES6语法）相当于 routes: routes
})
new Vue({
router
}).$mount('#app')如果你在這裡引入的不是routes，你就要用下面的方式來寫。
import vRoutes from '@/router/router'
const router = new VueRouter({
routes :vRoutes
})
new Vue({
router
}).$mount('#app')2.在路由中基於webpack實作元件的懶載入
對於我們的vue項目，我們基本上就是運用webpack打包的，如果沒有懶加載，打包後的文件將會異常的大，造成首頁白屏，延時嚴重，不利於用戶體驗，而運用懶加載則可以將頁面進行劃分，webpack將不同組件打包成很多小的js檔。需要的時候再異步加載，優化用戶的體驗，換而言之，有的頁面可能100個用戶只有一兩個會進去，何必把流量花在它身上。
import App from '@/App.vue'
const index = r => require.ensure([], () => r(require('@/pages/index/index')), 'index')
export default [{
path: '/',
component: App,
children: [
{
path: '/index',
name:'index',
component: index
}]
}]如果某個元件包含了巢狀路由，我們也可以將兩個路由打包到一個js chunk。
// 这两条路由被打包在相同的块中，访问任一路由都会延迟加载该路由组件 const orderUser= r => require.ensure([], () => r(require('@/pages/order/user')), 'order') const payRecord= r => require.ensure([], () => r(require('@/pages/order/payRecord')), 'order')
3.router的模式
#對於瀏覽器，我們的router分成兩個模式。
1.hash模式（預設）
依照一個uri的基本結構來說，hash模式就是在一個基本的URI的片段進行的處理。如果拋開SPA的話，比較常見的應用場景就是我們在做pc商城的時候，會有比如說：商品詳情，評論，商品參數這樣的tab切換，就可以使用a標籤配合id使用，加上一點運動的特效，效果甚佳。
這也是router預設使用的路由方式。不過，這種方式有一個弊端，就是在接入第三方的支付的時候，我們傳入一個url給到第三方支付作為回調地址，但是在支付完成以後，有的第三方支付會把我們的#作為一個截取符號，只保留第一個#符號前面的url內容，後面再加入對應的回呼參數。導致付款完成以後無法跳到對應的付款頁面
傳入的url:
http://xx.xx.com/#/pay/123
#回呼後的位址:
http://xx.xx.com/pay/123?data=xxxxx%xxxx
2.history模式
#還有一個就是history的模式。它是使用h5的history.pushState來完成URL的跳躍的。使用這種方式來處理跳轉的好處就是，url和我們平常看到的沒有什麼不同。和hash模式作比較的話就是沒有了#。不過使用history模式，我們在後台也要去做對應的處理，因為如果直接去存取一個位址，例如http://www.xxxx.com/user/id的時候，如果後端沒有設定的時候，後端就會回傳404頁面。
4.router-link在循環中this.參數名稱=undefined
無論是 h5 history 模式或 hash 模式，它的表現行為一致，所以，當你要切換路由模式，或是在 IE9 降級使用 hash 模式，無須任何變動。
在 HTML5 history 模式下，router-link 會守護點擊事件，讓瀏覽器不再重新載入頁面。
當你在 HTML5 history 模式下使用 base 選項之後，所有的 to 屬性都不需要寫（基底路徑）了。
不過當我們在v-for的循環中使用了router-link的時候，一般來說，我們需要取的都是循環裡的值，透過定義的item.xxx就可以取到。如果說需要取一個我們在data中定義的值的時候，我們是透過this.foo來取呢？還是透過foo來取呢？還是都可以？
這裡的話，我們是不能透過this.foo來取的，因為這裡的this,不再是指向vue的實例了，而是指向了[object Window]。所以用this.foo來取的話，其實是undefined.
<router-link tag="li" :to="{path:`/user/${item.userID}`}" v-for="(item, index) in userList" :key="index">
//含有固定的值
<p>{{this.foo}}</p>
<p>{{foo}}</p>
</router-link>
data(){
return {
foo:'bar',
}
}# 4.vue-router配合axios的使用
初次接触拦截器这个概念是在java中，通过拦截器，我们可以对用户的登录状态进行更加粒度的操作。而对于一个SPA的应用来说，没有了后台路由的介入，我们就需要在前端实现一套自己的登录状态的管理机制。
最直观的一点就是，通过用户的token来判断用户是否登录？
router.beforeEach((to, from, next) => {
const NOW = new Date().getTime();
if (to.matched.some(r => r.meta.requireAuth)) {
if(NOW > store.state.deadLine){
store.commit('CLEAR_USERTOKEN')
}
if (store.state.message.login === true) {
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath}
})
}
}
else {
next();
}
})上面的代码中，我们通过vue-router中的全局守卫，在导航触发的时候大致做了如下几件事：
（1）判断导航的页面是否需要登录
（2）超过登录持久期限，清除持久化的登录用户token
（3）没有超过登录期限，判断是否登录状态
（4）没登录，重定向到登录页面
但是，仅仅这样是不够的。因为用户直接不正常注销而直接后台运行网页是很正常的事情，这就导致虽然token是存在的，但是对于后台而言，这个token是无效的，过期的了。所以，我们需要axios配合后台给出的状态码来完善我们的拦截器。
import router from '@/router/routes'
axios.interceptors.response.use(
success => {
switch (success .code) {
case -100:
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
console.warn('注意,登录已过期!')
break;
}
return success;
},
error => {
switch (error.code) {
case 404:
console.warn('请求地址有误或者参数错误!')
break;
}
return Promise.reject(error.response.data)
});通过后端给到的登录过期状态码，这里以-100为例，我们可以用axios的响应拦截器实现，当我们的token过期的时候，我们将页面重定向到登录页面去。
5.巧用replace替换push
在项目中，我有的同事就是一直this.$router.push(...)，从开始push到结尾。
碰到有的页面，比如说，在选择地址的时候需要知道用户当前所在的城市，如果没有的话，就是重定向到城市列表页面去手动选取。选择完成以后再回到选择地址的页面，如果一直使用push的话，点击选择地址的后退时，就会回退到城市列表页。然后造成页面间的死循环。
这里如果使用replace来操作就没有什么问题了，问题就是我们不应该让城市列表页出现在我们的浏览历史里面。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是vue-router專案實戰（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
