前面我们创建的这两个路由都是静态的，就是它只能匹配具体的某个地址，比如这个 /events ，只有在访问这个地址的时候才会匹配这个路由 ..

下面我们再添加一个动态路由 .. 复制一块 .. 在这个地址里，可以加上一个 / ，然后 :id ，这个 :id 就是这个路由地址里的动态的部分 .. 冒号后面的东西是我们自己命名的 .. 在 Vue 的组件里，我们可以得到路由地址里的这些动态的部分 ..

再去改造一下 Event 这个组件 .. 在它的模板里，绑定一个 $route.params.id ， 路由里的动态部分都会包含在路由的 params 里面 .. 这个 id 就是地址里的其中的一部分 ...

到浏览器上去预览一下 .. 访问一下 events/ 后面加上一个 id .. 比如 1001 ... 页面上输出的标题里面，会包含我们在地址里面输入的 events 后面的这个值 .. 在定义路由的地址，我们给这个值起了个名字，叫 id .. 在组件里，可以利用这个值去做一些事情 ..

比如可以根据地址里的这个 id 的值，动态的在数据库里查询出对应的活动内容 ..

再试一下 .. /events/3033 .. 在 Event 组件上面同样会显示这个地址里的 id 的值 ..

跟刚才一样，展示内容用的组件都是我们在路由里指定的 Event 这个组件 ..

beforeRouteUpdate

再找到这个 Event 组件 .. 在它里面添加一个 beforeRouteUpdate 方法 .. 添加几个参数 .. to 表示打开的路由 .. from 表示从哪里来 .. 这两个东西都是 router 对象 .. 另外还有个 next ...

使用这个组件的路由发生变化的时候会执行这个 beforeRouteUpdate .. 这里我们可以把 to .. 还有 from 输出到控制台上检查一下 ..

再执行一下 next() ..

回到浏览器 ... 访问一下 events .. 后面随便加上一个 id 值 .. 路由有变化 .. 我们的 Event 组件里的 beforeRouteUpdate 会被执行 .. 这样会在控制台上输出 to .. 还有 from ..

你会发现， to 这里的 fullPath .. 就是当前我们访问的地址 .. from 里的 fullPath 是之前访问的地址 ..

params 里面的东西就是路由参数 ... 这里有个 id .. 这个参数就是地址里的 events 后面的内容 .. 在定义路由的时候，我们管这部分内容叫 id，所以 params 这里也会有个 id ..

注意 route 对象里还有个 query 属性，它里面的东西应该是地址里的查询参数 .. 就是地址里的 ? 号后面的东西 ..

在这个地址后面，加上一个 ?subscribe=true .. 访问一下这个地址 ..

在 to 这个 route 对象里面，query 属性现在有东西了 .. 里面有个 subscribe .. 对应的值就是 true ..

传递属性

我们可以传递属性给路由组件 .. 在 Event 这个组件里面，我们直接使用了 $route 里面的参数 .. 这里我们再改造一下 .. 在个 events/:id 里面，再添加一个 props ，对应的值是 true ..

这样路由里的参数会用属性的形式传递给它的组件 .. 找到 Event 组件 .. 添加一个 props .. 一个数组 .. 里面添加一个 id .. 它的值会从路由那里传递过来 ..

然后在组件的模板里面，我们直接绑定输出 id ...

回到浏览器 .. 再预览一下 ... 页面上输出的这个数字现在会是组件里的 id 属性 .. 这个属性的值是从路由那里传递过来的 ..