vue-router配置之通用路径

Posted 2020-10-23 哈姆PP

目的：浏览器地址栏输入了未匹配的地址时，前端控制跳转到首页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‘页面，（是为了用户体验不要太诡异）