Vue3路由传参使用新手详细指南

const routes = [
  { path: '/user/:id', name: 'UserDetail', component: UserDetail },
  { path: '/post/:id/:action?', name: 'Post', component: Post } // 可选参数
];

<!-- 通过路由链接 -->
<router-link :to="{ name: 'UserDetail', params: { id: 123 } }">用户详情</router-link>

<!-- 通过编程式导航 -->
this.$router.push({ name: 'UserDetail', params: { id: 123 } });

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params.id); // 输出: 123
</script>

{ path: '/user/:id?', component: User }

{ path: '/article/:id(\\d+)/:action(edit|view)', component: Article }

const routes = [
  { path: '/product/:category/:id', name: 'ProductDetail', component: ProductDetail },
  { path: '/order/:orderId/:status?', name: 'OrderInfo', component: OrderInfo },
  { path: '/blog/:year/:month/:day/:postId', name: 'BlogArticle', component: BlogArticle }
];

<router-link :to="{ name: 'ProductDetail', params: { category: 'electronics', id: 456 } }">电子产品详情</router-link>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params.category); // electronics
console.log(route.params.id);       // 456
</script>

{ 
  path: '/product/:category/:id', 
  name: 'Product', 
  component: ProductComponent, 
  props: (route) => ({ category: route.params.category, id: Number(route.params.id) }) 
}

const routes = [
  { path: '/user/:id?/:name?', name: 'UserDetail', component: UserDetail },
  { path: '/product/:category?/:id?', name: 'ProductDetail', component: ProductDetail }
];

<router-link :to="{ name: 'UserDetail', params: { id: '123' } }">用户详情</router-link>
<router-link :to="{ name: 'UserDetail', params: { id: '123', name: 'John' } }">用户详情</router-link>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const userId = route.params.id || 'defaultId';  // 提供默认值
const userName = route.params.name || 'defaultName';  // 提供默认值
console.log(userId);   // 输出: "123" 或 "defaultId"
console.log(userName); // 输出: "John" 或 "defaultName"
</script>

<router-link :to="{ name: 'UserList', query: { page: 2, size: 10 } }">第二页</router-link>

this.$router.push({ name: 'UserList', query: { page: 2, size: 10 } });

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.query.page);  // 2
console.log(route.query.size);  // 10
</script>

const route = useRoute();
router.push({ name: 'UserList', query: { ...route.query, page: 2 } });

const routes = [
  { 
    path: '/user/:id', 
    components: { 
      default: UserProfile, 
      sidebar: UserSidebar 
    }, 
    props: { 
      default: true, 
      sidebar: { admin: true } 
    }
  }
];

<!-- UserProfile.vue -->
<script setup>
const props = defineProps({ id: String });
</script>

<!-- UserSidebar.vue -->
<script setup>
const props = defineProps({ admin: Boolean });
</script>

const routes = [
  { path: '/user/:id', name: 'User', component: UserComponent, props: true },
  { 
    path: '/search', 
    name: 'Search', 
    component: SearchComponent, 
    props: (route) => ({ query: route.query.q, page: Number(route.query.page) || 1 })
  }
];

<script setup>
const props = defineProps({ id: String, query: String, page: Number });
</script>

// store/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({ userId: null, userInfo: {} }),
  actions: {
    setUserId(id) { this.userId = id; },
    fetchUserInfo() { return fetch(`/api/users/${this.userId}`).then(res => res.json()); }
  }
});

<script setup>
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';

const router = useRouter();
const userStore = useUserStore();

const goToUser = (id) => {
  userStore.setUserId(id);
  router.push({ name: 'UserDetail' });
};
</script>

const routes = [
  { 
    path: '/dashboard', 
    name: 'Dashboard', 
    component: Dashboard, 
    meta: { requiresAuth: true, title: '控制面板' }
  }
];

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.meta.title); // "控制面板"
</script>

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return { name: 'Login' };
  }
});