vue中訪問不存在路由默認跳轉404頁面實現方法

今天做新項目發現，當訪問的頁面路由不存在的時候，頁面顯示一片空白，需要新增一個404錯誤頁面，那么怎么才能跳轉到這個404頁面呢

 

方法：在路由頁面，一般文件名為index.js ，在最后添加一個path:*; 優先級從上到下查找路由，都沒有的時候全部指向 404頁面 ，代碼如下：

　　　我把index.js文件放在router文件夾下；一般也會放在page文件下或者views文件夾有這么一個index.js文件

 

 

 

 

 

優點：簡單、方便；

 

缺點：如果項目中添加了判斷token失效跳出登錄然后記住當前頁面，登錄時候自動跳轉到上次token失效的頁面，就會有問題，如果故意輸入不存在的路由就會在404,失效退出然后登陸后就會自動跳到這個404頁面，那樣就尷尬了；如果沒有這個功能，用上述方法還是比較好使的

 

解決方法：在index.js文件中注釋剛剛加入的path：* 這些東西

在router.beforeEach 里面使用 to.matched 匹配出的路由個數來作為判斷條件,匹配不到路由就跳轉到404頁面，代碼如下

pemmision.js

代碼如下：

import router from './router'
import { getCookie } from './utils/auth'
 
// 通過beforeEach鈎子來判斷用戶是否登陸過 有無token
const whiteList = ['/login'] // 不重定向白名單
// const userInfo = getUserInfo()
 
router.beforeEach((to, from, next) => {
  console.log(to.matched)
  // 判斷是否有登錄過
  if (getCookie('userId_dev')) {
    // 如果包含userId_dev 從登錄頁面跳轉 直接跳轉到首頁 /
    if (to.path === '/login') {
      next()
    } else {
      if (to.matched.length === 0) {
        next('/404') // 判斷此跳轉路由的來源路由是否存在，存在的情況跳轉到來源路由，否則跳轉到404頁面
      }
      next() // 如果匹配到正確跳轉
    }
  // 沒有登錄
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      // 還沒有登錄過 則跳轉到登錄界面
      // next('/login')
      if (to.path.slice(1) !== '') {
        if (to.matched.length === 0) {
          router.push({
            path: '/login'
          })
        } else {
          router.push({
            path: '/login',
            query: {
              redirect: to.path.slice(1)
            }
          })
        }
      } else {
        router.push({
          path: '/login'
        })
      }
    }
  }
})