面试题：Vue Router服务端渲染（SSR）中，路由如何配置动态参数以适应服务端渲染场景？

Question

在Vue Router的SSR环境下，描述如何配置动态路由参数，以及在服务端和客户端获取这些参数的方式有何不同。同时说明动态参数对路由匹配和渲染的影响。

Answer 1

配置动态路由参数

在Vue Router的SSR环境下，配置动态路由参数和普通Vue Router配置类似。在路由定义中，使用冒号（:）来标识动态参数。例如：

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

这里的:id就是动态参数。

服务端获取动态参数

在服务端（如使用Nuxt.js等SSR框架），可以通过上下文对象来获取动态参数。以Nuxt.js为例，在页面组件的asyncData或fetch方法中：

export default {
  asyncData({ params }) {
    const userId = params.id;
    // 进行数据获取等操作
    return { user: await getUserById(userId) };
  }
};

客户端获取动态参数

在客户端，一般在组件的created或mounted钩子函数中通过$route对象获取动态参数。例如：

export default {
  created() {
    const userId = this.$route.params.id;
    // 进行数据获取等操作
  }
};

动态参数对路由匹配和渲染的影响

• 路由匹配：动态参数使得路由可以匹配多个不同具体路径的请求，只要路径模式符合定义的动态路由格式。例如/user/1、/user/2等都能匹配到/user/:id这个路由。这大大提高了路由的灵活性，适用于展示列表项详情等场景。
• 渲染：由于动态参数可能会改变组件展示的数据，因此在路由切换（动态参数变化）时，组件可能需要重新获取数据进行渲染。在SSR环境下，服务端会根据动态参数获取相应数据并渲染出初始HTML，客户端在激活时可能需要根据新的动态参数再次获取数据（如果数据已过期或需要更新），以保证数据一致性和实时性。