vue-route使用( 二 ) _JavaScript

96，打开浏览器的节制台，可以看到路由时组件的切换。
起首看到 router-link 标签衬着当作了 a 标签，to 属性酿成了a 标签的 href 属性，这时就大白了点击跳转的意思。 router-view 标签衬着当作了界说的组件。可以对比一下app.vue 中的标签和节制台中的标签

10动态路由
分歧的用户（就是用户的id分歧），它城市导航到统一个user 组件中。在设置装备摆设路由的时辰，就不克不及写死, 就是路由中的path属性，不克不及写死。如 path： “/home”,只有是home的时辰，才能显示home 组件，执行的是严酷匹配。导航到 user 组件，路径中必定有user,
id 分歧，那就给路径一个动态部门来匹配分歧的id. 动态部门以 : 开首，那么路径就酿成了 /user/:id, 这条路由就可以这么写： { path:"/user/:id", component: user }.
再界说一个user组件，页面中添加两个router-link 用于导航， router.js中添加路由设置装备摆设。 user组件随便写一个就好了。
app.vue 更改如下：

11在动态路由中，想知道路由是从哪里过来的，就是获取到动态部门怎么办。当整个vue-router 注入到根实例后，在组件的内部，可以经由过程this.$route.params 来获得这个动态部门的。它是一个对象，属性名，就是路径中界说的动态部门 id, 属性值就是router-link中to 属性中的动态部门，如123 。在组件中，若是想要获取到state 中的状况，我们可以用computed 属性，在这里也是一样，在组件中，界说一个computed 属性dynamicSegment， user 组件点窜如下：

以上内容就是vue-route使用的内容啦，希望对你有所帮助哦！

vue-route使用( 二 )

猜你喜欢