Vue Router参数传递的多种方式小结

// router/index.js
const routes = [
  {
    path: '/user/:id', // 动态路由
    name: 'UserDetail',
    component: () => import('@/components/UserDetail.vue')
  }
];

<!-- Home.vue -->
<template>
  <div>
    <button @click="goToUserDetail(123)">查看用户 123 的详情</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    goToUserDetail(userId) {
      this.$router.push({ name: 'UserDetail', params: { id: userId } });
    }
  }
};
</script>

<!-- UserDetail.vue -->
<template>
  <div>
    <h1>用户详情</h1>
    <p>用户 ID: {{ id }}</p>
  </div>
</template>
 
<script>
export default {
  computed: {
    id() {
      return this.$route.params.id; // 获取动态路由参数
    }
  }
};
</script>

// router/index.js
const routes = [
  {
    path: '/users',
    name: 'UserList',
    component: () => import('@/components/UserList.vue')
  }
];

<!-- Home.vue -->
<template>
  <div>
    <button @click="goToUserList">查看活跃用户</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    goToUserList() {
      this.$router.push({ path: '/users', query: { filter: 'active' } });
    }
  }
};
</script>

<!-- UserList.vue -->
<template>
  <div>
    <h1>用户列表</h1>
    <p>当前过滤条件: {{ filter }}</p>
  </div>
</template>
 
<script>
export default {
  computed: {
    filter() {
      return this.$route.query.filter; // 获取查询参数
    }
  }
};
</script>

// router/index.js
const routes = [
  {
    path: '/product/:id',
    name: 'ProductDetail',
    component: () => import('@/components/ProductDetail.vue'),
    props: true // 将路由参数作为 props 传递
  }
];

<!-- ProductDetail.vue -->
<template>
  <div>
    <h1>产品详情</h1>
    <p>产品 ID: {{ id }}</p>
  </div>
</template>
 
<script>
export default {
  props: ['id'] // 接收路由参数
};
</script>

// router/index.js
const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/components/Dashboard.vue'),
    meta: { requiresAuth: true } // 添加元信息
  }
];

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth(); // 假设这是一个检查登录状态的方法
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login'); // 跳转到登录页
  } else {
    next(); // 继续导航
  }
});

<!-- Home.vue -->
<template>
  <div>
    <button @click="goToSection">跳转到简介部分</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    goToSection() {
      this.$router.push({ path: '/about', hash: '#intro' });
    }
  }
};
</script>

<!-- About.vue -->
<template>
  <div>
    <h1>关于我们</h1>
    <div id="intro">
      <h2>简介</h2>
      <p>这里是简介内容。</p>
    </div>
  </div>
</template>
 
<script>
export default {
  mounted() {
    if (this.$route.hash === '#intro') {
      // 滚动到简介部分
      const element = document.getElementById('intro');
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }
};
</script>