代码之家 › 专栏 › 技术社区 › nos

如何使用vue路由器重定向到URL参数无效的404页面

vue-router vue.js

nos · 技术社区 · 6 年前

而router.js如下所示

export default new Router({ 
  mode: 'history', 
  base: process.env.BASE_URL, 
  routes: [ 
    { 
      path: '/user/:id',
      name: 'user',  
      component: () =>  
        import(/* webpackChunkName: "user" */ './views/User.vue'),
      props: true               
    },
    {
      path: '/404', 
      name: '404',
      component: () => import('./views/404.vue'),
    },
  ] 
})

如果有人转到 /user/some-invalid-id ,如何将其重定向到404页面?

breforecreate() ,在内部,对现有用户访问用户视图,如下所示

<router-link :to="{name: 'user', params:{id: u.pk}}" >                  
  <a> {{u.first_name}} {{u.last_name}} </a>                             
</router-link>

我知道可以通过一个push函数调用以编程方式重定向。但是我不知道这个代码应该用在哪里。

this.$router.push('/404')

User.vue userByID 检索数据。

userByID: (state) => id => {
    return state.users.find(u => (u.pk == id))
}

应该 router.push('/404') 发生在还是它的呼叫者?我们如何处理模板渲染 undefined 用户对象?

1 回复 | 直到 6 年前

Jim B. 6 年前

我想你应该使用“导航卫士”,特别是 beforeEnter 上钩 /user/:id 路线。

类似这样的东西(未经测试;只是方向性的):

routes: [ 
    { 
        path: '/user/:id',
        name: 'user',  
        component: () =>  
            import(/* webpackChunkName: "user" */ './views/User.vue'),
        props: true,               
        beforeEnter: (to, from, next) => {
            if (!userById($route.params.id)) {
                next('/404'); 
            }
            else {
                next();
            }
        }        
  }
    },
    {
        path: '/404', 
        name: '404',
        component: () => import('./views/404.vue'),
    },
  ]

您还可以实现 beforeRouteEnter 直接挂接User.vue,但您将无法在那里调用其他User.vue方法,因为组件尚未装入。

有关导航卫士的更多信息: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-guards

考虑到你的userById方法正在访问商店,我发现这篇文章可能会帮助你在你的网站上访问商店 进门前 方法: How to access async store data in vue-router for usage in beforeEnter hook?

推荐文章

Jimmy Kiarie · 路由之前的Vue js

6 年前

angelique000 · 对于非常大的Web应用程序,Vue路由器的最佳实践是什么?

6 年前

Felipe Paulo · Vuejs未渲染子路由

6 年前

angelique000 · 如何在Vue组件中加载OpenSeadragon组件

6 年前

dsky · 保持Vue状态

6 年前

Paul Renshaw · Vue。Firebase托管上的js SPA,使用通配符重写Firebase云函数

6 年前

josefdev · 如何在Vue中声明被动属性。js公司

6 年前

ChadQi · 刷新浏览器导致文件路径更改

6 年前

DarkFenix · 访问存储或获取程序的状态_WEBPACK\u IMPORTED\u MODULE\u 3\u store\uuuuuuuuuuuu。a、调度不是一项功能

6 年前

Chad Carter · Vue测试UTIL未知自定义元素:<路由器链接>

6 年前