Problems encountered in route parameter passing and route guarding when using Vue development

Vue is a JavaScript-based front-end development framework that helps developers build efficient, flexible and scalable user interfaces. During the Vue development process, routing parameters and routing guards are some common problems. This article describes these issues and provides specific code examples.

1. Routing parameter passing problem
In Vue, routing parameter passing means passing some data to the target page while the page jumps. Common scenarios include the user clicking an item on the list page and then jumping to the details page, and passing the information about the corresponding item to the details page. When implementing route parameter passing, you can use Vue Router's params or query to pass parameters.

1. Use params to pass parameters
   Params is a way to pass parameters to the target page in the form of a dynamic path. It is suitable for situations where parameters need to be included in the URL. The following is a sample code:

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/detail/:id',
      component: Detail
    }
  ]
})

// 列表页
<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id">
        <router-link :to="'/detail/' + item.id">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' },
      ]
    }
  }
}
</script>

// 详情页
<template>
  <div>
    <h2 id="project-name">{{ project.name }}</h2>
    <p>{{ project.description }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      project: {}
    }
  },
  mounted() {
    // 获取params参数
    const id = this.$route.params.id;
    // 根据id去获取具体项目信息，这里为了简化，直接从itemList中查找
    this.project = this.itemList.find(item => item.id === Number(id));
  }
}
</script>

2. Use query to pass parameters
   query is a way to append parameters to the URL in the form of key-value pairs. It is suitable for parameters with relatively large Multiple or complex situations. The following is a sample code:

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/detail',
      component: Detail
    }
  ]
})

// 列表页
<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id">
        <router-link :to="{ path: '/detail', query: { id: item.id }}">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' },
      ]
    }
  }
}
</script>

// 详情页
<template>
  <div>
    <h2 id="project-name">{{ project.name }}</h2>
    <p>{{ project.description }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      project: {}
    }
  },
  mounted() {
    // 获取query参数
    const id = this.$route.query.id;
    // 根据id去获取具体项目信息，这里为了简化，直接从itemList中查找
    this.project = this.itemList.find(item => item.id === Number(id));
  }
}
</script>

2. Routing guard issue
Routing guard refers to the function of performing some operations before and after a route jump. In Vue Router, different needs can be achieved through global front guards, global post guards, and guards within components.

1. Global front guard
   Global front guard can perform some operations before any route jump, such as verifying user permissions or recording user behavior. The following is a sample code:

// 路由守卫配置
router.beforeEach((to, from, next) => {
  // 判断用户是否处于登录状态
  const isLogged = checkLogin();
  
  if (to.meta.authRequired && !isLogged) {
    // 需要登录才能访问的页面
    next('/login');
  } else {
    next();
  }
});

2. Global post guard
   Global post guard can perform some operations after any route jump, such as recording user behavior or counting page views quantity. The following is a sample code:

// 路由守卫配置
router.afterEach((to, from) => {
  // 统计页面浏览量
  recordPageView();
});

3. Guards within the component
   Guards within the component can perform specific operations on the current component, such as saving user-entered data before the component is destroyed or Check that the form is completely filled out. The following is a sample code:

// 组件内的守卫配置
export default {
  beforeRouteLeave(to, from, next) {
    if (this.isDirty) {
      // 提示用户保存未保存的数据
      const confirmed = window.confirm('是否保存未提交的数据？');

      if (confirmed) {
        // 保存数据
        this.saveData();
      }
    }

    next();
  }
}

The above is the solution to the routing parameter passing and routing guard problems encountered in Vue development. By using params or query to pass parameters, and combining global pre-guards, global post-guards and guards within components, more flexible and secure routing jumps and operations can be achieved. Hope this article can be helpful to you.

The above is the detailed content of Problems encountered in route parameter passing and route guarding when using Vue development. For more information, please follow other related articles on the PHP Chinese website!