vue.js 声明式导航-跳转传参

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。在 Vue.js 中，可以使用声明式导航来实现页面之间的跳转并传递参数。

声明式导航是通过使用 Vue Router 来实现的。Vue Router 是 Vue.js 官方的路由管理器，它可以实现单页面应用（SPA）的前端路由。声明式导航使用 <router-link> 组件来实现跳转，并通过 to 属性指定目标路由。

在跳转时传递参数，可以使用路由的动态路由和命名路由来实现。

动态路由是根据路由的路径中的一部分来匹配和渲染组件的。在路由配置中，可以使用冒号 : 来指定动态路由的部分，然后在组件中通过 $route.params 来获取传递的参数。

命名路由是给路由配置中的每个路由取一个名字，在跳转时可以使用这个名字来传递参数。可以在 to 属性中使用对象的方式来指定目标路由的名字和参数。

下面是一个示例，展示了如何在声明式导航中跳转并传递参数：

首先，在路由配置中定义动态路由和命名路由：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
];

const router = new VueRouter({
  routes
});

然后，在组件中使用 <router-link> 组件跳转并传递参数：

<template>
  <div>
    <router-link :to="{ name: 'user', params: { id: userId } }">用户详情</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: 123
    };
  }
};
</script>

在上面的代码中，我们在 to 属性中使用了一个对象来指定目标路由的名字和参数。传递的参数是通过 params 属性来指定的，这里我们传递了一个名为 id 的参数，并将其值设置为 userId。

当点击链接时，Vue Router 会根据配置中的路由路径去匹配对应的组件，并将传递的参数存储在 $route.params 中。在 User 组件中，可以通过 this.$route.params.id 来获取传递的参数。