用户登录

之前我们在 Vue 应用里定义的都是静态的路由,也就是你规定了路由的固定的地址,访问这个具体地址的时候,可以显示某个组件。路由也可以是动态的,就是我们可以定义具有某种特定模式的路由地址,在路由地址里可以添加一些参数,这些参数的值可以在对应的组件里得到。比如你可能需要一个展示内容的页面,根据用户访问的地址,显示不同的内容。

下面我们一块儿试一下定义一个动态路由。先在应用里创建一个组件,放在 src/post/show 目录的下面,名字叫 post-show.vue ,在组件里用一组 template,里面用一组 div,包装一行文字,比如 PostShow。

然后打开 post.routes.ts, 先在文件顶部导入需要的组件,导入的是 PostShow 这个组件,来自当前目录 show 下面的 post-show.vue。

在routes 里面添加一个对象,定义一条路由,先用 path 设置一下路由的地址,把它设置成 /posts/:postId ,这就是一个动态路由,也就是一个带参数的路由,这里的 :postId 就是地址里的一个参数。用户如果访问 /posts/1 ,这个地址里的 :postId 参数的值就是 1,访问的是 /posts/2 ,地址参数里的 :postId 的值就是 2 。

下面再用 name 给这个路由起个名字,postShow,再添加一个 component 属性,对应的组件设置成 PostShow 。

先回到浏览器测试一下,可以手工在地址栏里输入一个地址 /posts/1 ,你会发现,显示的就是 PostShow 这个组件,再试一下,访问 /posts/3 ,仍然会显示 PostShow 这个组件。

在这个组件里我们可以利用地址参数的值去做一些事情,比如根据这个值找出对应的内容数据,再把内容展示出来。打开 post-show.vue 这个组件,在组件的模板里可以先用一下 postId 这个地址参数的值,地址参数可以在 $route.params 这个属性里找到,这里要用的是 postId 这个参数,这个参数的名字是我们在定义路由的时候自己设置的,也就是这个 /posts/:postId 里面的 :postId。

在组件的脚本里你也可以得到这个参数值,添加一组 script ,默认导出一个对象,添加一个 created 生命周期方法,在方法里可以在控制台上输出 postId 这个地址参数的值。 this.$route. params.postId。

回到浏览器再试一下,现在访问的是 /posts/3,在 PostShow 组件里绑定输出的 postId 这个参数的值就是 3。修改一下访问的地址,/posts/6,在组件这里显示的 postId 参数的值就是 6 。

在控制台上,也会输出当前访问的地址里的 postId 这个参数的值。

动态路由(带地址参数的路由)《 Vue.js 前端应用 #5:应用路由 》

统计

12921
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点