vue-router之动态路由

时间:2021-01-07 12:20:57

 

❤本篇博客参考爱心老师Ewall的简书

 

一、路由动态的适用场景

 

比如在写商品详情页面的时候,页面结构都一样,只是商品id的不同,所以这个时候就可以用动态路由动态。

 

二、动态路由的官方文档

传送地址:https://router.vuejs.org/zh-cn/

 

可以在一个路由中设置多段“路径参数”,对应的值都会设置到$route.params中。例如:

 
vue-router之动态路由
 

三、动手操作一下吧

♥ 1.先动手试一下上面表格中第一个模式的实现,在我们之前创建的my-first-project的src文件夹下新建一个文件夹并命名为view

然后在文件夹下新建test.vue,(没创建项目的可参考我这篇:https://www.cnblogs.com/crystral/p/9061839.html)

 


 

vue-router之动态路由

 

♥ 2.打开test.vue文件(可用sublime、webstorm等)


 

vue-router之动态路由

 

♥ 3.到my-project->src->router->index.js文件,打开并输入(我是用webstorm打开的,之前学JS也是用webstorm写)


 

vue-router之动态路由

 

♥ 4.再到test.vue组件中输入:


 

vue-router之动态路由

 

在这里说明一下,$router.params.testId的意思,当然是获取当前路由的参数

 

♥ 5.运行项目     (也可以用cnpm run dev)cnpm 会快一点


 

vue-router之动态路由

出现下面这个之后

vue-router之动态路由

 

♥ 6.打开浏览器,输入localhost:8080


 

 vue-router之动态路由

 

以上表格中的第一个模式就完成了,第二个模式同理

 ♥ ① 修改路由index.js文件


 

 vue-router之动态路由

 

 ♥ ② 修改test.vue文件


 

 vue-router之动态路由

 

♥ ③ Ctrl+S保存之后,打开浏览器


 

 vue-router之动态路由

以上,完成~~~