vue-router配置之通用路径

目的:浏览器地址栏输入了未匹配的地址时,前端控制跳转到首页index页面:

项目入口js:(一般根据项目结构不同,这个js一般取名为:app.js或者main.js)

import Router from 'vue-router'

Vue.use(Router);

const router = new Router({
    routes: [
        {path: "/index", component: HomePage},
        {path: "/login", component: Login},
        {path: "*", redirect:'/index'},//这个意思就是如果浏览器地址栏输入的不是'/index'也不是'/login',那我就让它跳转到'index'页面
    ]
});

备注:

{path: "*", redirect:'/index'}

*号代表匹配所有路径,注意这句要放在其他路径的最后面。

由于我这个前端项目只配置了2个路径:‘index’和'login',所以我需要当浏览器地址栏输入的不是'/index'也不是'/login'时,那我就让它前端控制路由跳转到'index'页面,(是为了用户体验不要太诡异)

原文地址:https://www.cnblogs.com/hamsterPP/p/8426909.html