vue项目访问路径（解决vue项目路径不正确,自动跳转404的问题）
导读：vue项目路径不正确,自动跳转404 第一种方法...
vue项目路径不正确,自动跳转404
第一种方法
使用vuerouter钩子函数beforeEach，每次进行路由跳转时都进行判断，若页面不存在就跳转到404页面。
import Error from
const router = new Router({
routes:[
name: error,
path: /error,
component: Error
]
}
//beforeEach每次进行路由跳转时都会执行
router.beforeEach((to,from,next){
if(to.matched.length === 0){
from.path ? next({name: from.name}) : next(/error)
}else{
next()
}
})
export default router
第二种
redirect重定向
{ path: /404,
component: () => import(@/views/error-page/404),
hidden: true
},
//这个*匹配必须放在最后，将改路由配置放到所有路由的配置信息的最后，否则会其他路由path匹配造成影响。
{ path: *,
redirect: /404,
hidden: true
}
vue路由判断跳转404页面
beforeEach函数 这是路由跳转前处理的函数
import PageNotFound from @/views/pages/404.vue
Vue.use(Router)
const routes=[
{
path: *,
name: PageNotFound,
component: PageNotFound,
},
]
const router = new Router({
mode: history,
routes: routes
})
router.beforeEach((to, from, next) => {
// 从其他地方访问是否有这个地址
if(to.matched.length == 0){
from.path ? next({name: from.name}) : next(*)
}
next();
});
第二种方法就是重定向地址 同上
修改routes中的地址
{
path: /404,
name: PageNotFound,
component: PageNotFound,
},
{
path:*,
redirect:/404
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！