Question

我在一个页面上设置了多个路由，我想只验证一个路由，我正在使用以下代码：

＆＃13;

beforeRouteEnter(to, from, next) {
      
    
      if(firstString=='a'||firstString=='A'){
        if(parseInt(substring1) > 219028 && parseInt(substring1) < 386817){
  console.log("Valid")
      }
      else{
        alert("Invalid Seat No...!!")
          next({
            path: '/'
          });
          this.$refs.seatno1.focus();
        }

    },

＆＃13;

<router-link :to="'institute_details/' + seatno " class="btn btn-success" >
                  <span v-on:click.capture="validateData">LINK</span>
                </router-link>



<router-link :to="'institute_details/' + agriculture"  data-toggle="tooltip" title="agri" data-placement="right" class="btn btn-danger">Agri</router-link>

＆＃13;

我想验证＆＃34;＆＃39; institute_details /＆＃39; + seatno＆＃34;仅

Answer 1

首先，您可以在路由语法中使用正则表达式/动态模式来匹配相关地址。这应该涵盖大多数用例。

在这个简单的示例中，您可以在this.$route.params.location中恢复组件内的参数。

new VueRouter({
  routes: [
    { path: 'institute_details/:location', component: somePage }
  ]
})

有关它的更多详细信息（例如高级正则表达式使用），请参阅：https://router.vuejs.org/en/essentials/dynamic-matching.html

另外，正如您所做的那样，您可以使用全局或组件级别的导航防护来进行一些更高级的测试，如果不满意，请拒绝导航。只需致电next(false)。

beforeRouteEnter (to, from, next) {
    if (to.params.location === 'you-shall-not-pass') {
        next(false);
    }
    else {
        next();
    }
}

请参阅：https://router.vuejs.org/en/advanced/navigation-guards.html

在vue

1 个答案: