面试题：Vue中Vue Router在Vue 2与Vue 3里配置动态路由的差异

Question

请阐述在Vue 2和Vue 3项目中，使用Vue Router配置动态路由的具体步骤和存在的差异，并举例说明如何通过动态路由传递参数以及在组件中获取这些参数。

Answer 1

Vue 2中使用Vue Router配置动态路由步骤

1. 安装Vue Router：

   npm install vue-router --save
   

2. 创建路由文件（通常为router.js）：

   import Vue from 'vue';
   import Router from 'vue-router';
   import Home from '@/components/Home';
   import User from '@/components/User';
   
   Vue.use(Router);
   
   export default new Router({
     routes: [
       {
         path: '/user/:id',
         name: 'User',
         component: User
       },
       {
         path: '/',
         name: 'Home',
         component: Home
       }
     ]
   });
   

   这里/user/:id中的:id就是动态路由参数。

3. 在Vue应用中使用路由： 在main.js中：

   import Vue from 'vue';
   import App from './App.vue';
   import router from './router';
   
   new Vue({
     el: '#app',
     router,
     components: { App },
     template: '<App/>'
   });
   

4. 传递参数： 在模板中可以这样传递参数：

   <router - link :to="{name: 'User', params: {id: 123}}">User 123</router - link>
   

   在JavaScript中：

   this.$router.push({name: 'User', params: {id: 123}});
   

5. 获取参数： 在User组件中可以通过$route.params获取参数：

   export default {
     name: 'User',
     created() {
       console.log(this.$route.params.id);
     }
   };
   

Vue 3中使用Vue Router配置动态路由步骤

1. 安装Vue Router：

   npm install vue-router@next --save
   

2. 创建路由文件（通常为router.js）：

   import { createRouter, createWebHistory } from 'vue-router';
   import Home from '@/components/Home.vue';
   import User from '@/components/User.vue';
   
   const routes = [
     {
       path: '/user/:id',
       name: 'User',
       component: User
     },
     {
       path: '/',
       name: 'Home',
       component: Home
     }
   ];
   
   const router = createRouter({
     history: createWebHistory(),
     routes
   });
   
   export default router;
   

3. 在Vue应用中使用路由： 在main.js中：

   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   
   const app = createApp(App);
   app.use(router);
   app.mount('#app');
   

4. 传递参数： 在模板中：

   <router - link :to="{name: 'User', params: {id: 123}}">User 123</router - link>
   

   在JavaScript中：

   this.$router.push({name: 'User', params: {id: 123}});
   

5. 获取参数： 在User组件中，若使用Composition API：

   import { useRoute } from 'vue-router';
   
   export default {
     setup() {
       const route = useRoute();
       console.log(route.params.id);
     }
   };
   

   若使用Options API：

   export default {
     name: 'User',
     created() {
       console.log(this.$route.params.id);
     }
   };
   

差异

1. 创建路由实例：
   • Vue 2：通过new Router()创建路由实例。
   • Vue 3：使用createRouter()函数创建路由实例，并且需要传入createWebHistory()等函数来定义路由模式。
2. Vue应用使用路由方式：
   • Vue 2：在new Vue()中传入router选项。
   • Vue 3：通过createApp().use(router)的方式使用路由。
3. 在组件中获取参数方式：
   • Vue 2：主要通过this.$route.params获取动态路由参数（Options API）。
   • Vue 3：除了this.$route.params（Options API），还可以使用Composition API中的useRoute()来获取参数。