讲解vue-router之什么是动态路由
讲解 Vue Router 之动态路由 本文主要介绍了 Vue Router 中的动态路由,详细讲解了什么是动态路由,以及其适用场景和实现方法。 一、什么是动态路由 动态路由是指在路由中可以根据不同的参数来显示不同的内容。例如,在写商品详情页面的时候,页面结构都一样,只是商品id的不同,这时可以使用动态路由来实现。动态路由可以根据不同的参数来显示不同的内容,从而提高开发效率和代码的可维护性。 二、适用场景 动态路由有很多适用场景,例如: * 商品详情页面:在写商品详情页面的时候,页面结构都一样,只是商品id的不同,这时可以使用动态路由来实现。 * 用户信息页面:在写用户信息页面的时候,页面结构都一样,只是用户id的不同,这时可以使用动态路由来实现。 * 等等。 三、官方文档 根据官方文档,动态路由可以在一个路由中设置多段“路径参数”,对应的值都会设置到$route.params中。例如: ``` const router = new VueRouter({ routes: [ { path: '/test/:testId', component: Test } ] }) ``` 在上面的例子中,我们设置了一个路由,路径为 `/test/:testId`,其中 `:testId` 是一个路径参数。这样,当用户访问 `/test/123` 时,`$route.params.testId` 就会被设置为 `123`。 四、动手试一试 让我们动手试一下动态路由。我们新建一个文件夹并命名为 `view`,然后在文件夹下新建一个 `test.vue` 文件。然后,我们在 `router` 文件夹下创建一个 `index.js` 文件,并输入以下代码: ``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/test/:testId', component: () => import('@/views/test.vue') } ] }) ``` 然后,我们在 `test.vue` 文件中输入以下代码: ``` <template> <div> <h1>{{ $route.params.testId }}</h1> </div> </template> <script> export default { name: 'Test' } </script> ``` 现在,我们可以输入 `localhost:8080/#/test/123` 并查看结果。你会看到一个页面,上面显示了 `123`,这就是动态路由的第一个模式。 五、总结 本文主要介绍了 Vue Router 中的动态路由,包括什么是动态路由、适用场景、官方文档和动手试一试。动态路由可以根据不同的参数来显示不同的内容,从而提高开发效率和代码的可维护性。