vue实用记录(持续中)

文章目录

1. 1. 1.动态路由匹配
2. 2. 2.computed中绑定组件用到的data

1.动态路由匹配

官网链接

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

现在呢，像 /user/123 和 /user/456 都将映射到相同的路由。

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。(let id = this.$route.params.id)

这样就不用在页面传参数的时候,额外加id这个参数key.

2.computed中绑定组件用到的data

比如获取实例1中的id,之前的做法就是,在生命周期created()中获取id,像这样:let id = this.$route.params.id||0.再在data()中定义这个id.

因为computed在生命周期beforeCreate()的时候就已经执行了.

那这样直接就可以这样使用

computed: {
            id() {
                return this.$route.params.id || 0
            }
        }