面试题：Vue中如何实现Vue Router的动态路由配置？

Question

请阐述在Vue项目里，使用Vue Router进行动态路由配置的基本步骤和方法，并举例说明动态路由参数如何在组件中获取和使用。

Answer 1

基本步骤和方法

1. 安装与引入

   • 确保在项目中安装了vue - router：npm install vue - router
   • 在main.js中引入并使用：

   import Vue from 'vue';
   import VueRouter from 'vue - router';
   import App from './App.vue';
   
   Vue.use(VueRouter);
   
   const router = new VueRouter({
     routes: []
   });
   
   new Vue({
     router,
     render: h => h(App)
   }).$mount('#app');
   

2. 定义动态路由

   • 在router/index.js中定义动态路由，例如：

   const routes = [
     {
       path: '/user/:id',
       name: 'User',
       component: () => import('@/views/User.vue')
     }
   ];
   

   • 这里path中的:id就是动态参数，id可以被替换为任意合法的参数名。

3. 导航到动态路由

   • 在模板中使用<router - link>：

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

   • 或者在JavaScript代码中使用this.$router.push：

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

动态路由参数在组件中获取和使用

1. 在组件中获取参数
   • 在User.vue组件中，可以通过$route.params获取动态路由参数：

   <template>
     <div>
       <p>The user ID is {{ $route.params.id }}</p>
     </div>
   </template>
   
   <script>
   export default {
     name: 'User'
   };
   </script>
   

   • 也可以在created钩子函数中获取：

   <template>
     <div>
       <p>The user ID is {{ userId }}</p>
     </div>
   </template>
   
   <script>
   export default {
     name: 'User',
     data() {
       return {
         userId: ''
       };
     },
     created() {
       this.userId = this.$route.params.id;
     }
   };
   </script>
   

2. 使用参数
   • 比如可以根据id从后端获取用户详细信息，在User.vue的created钩子函数中：

   <template>
     <div>
       <p v - if="user">{{ user.name }}</p>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   export default {
     name: 'User',
     data() {
       return {
         user: null
       };
     },
     created() {
       const id = this.$route.params.id;
       axios.get(`/api/users/${id}`).then(response => {
         this.user = response.data;
       });
     }
   };
   </script>