（八）获取Query查询参数 和 命名路由精确控制跳转

this.$toute.query

cosnt routes = [{
    path: '/posts/:id',
    name: 'post',
    component: BolgPostPage
}]

// 名字要和 route 取的名字一样
<router-link :to="{name: 'post'}">
内容详情页
</router-link>

// 传递 params，query 参数
<router-link 
    :to="{
        name: 'post', 
        params: {id: 50, name: '张三'}，
        query: {order: 'desc', gender: '男'}
    }"
>
内容详情页
</router-link>

import BlogPostPage from "./pages/BlogPostPage.vue";
import UserDetailsPage from "./pages/UserDetailsPage.vue";

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    // path: "/posts/:id",
    path: "/:id",
    name: "post",
    component: BlogPostPage,
  },
  {
    // path: "/users/:id",
    path: "/:id",
    name: "userDetails",
    component: UserDetailsPage,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;