美文网首页
动态路由 & 嵌套路由

动态路由 & 嵌套路由

作者: 树袋熊熊 | 来源:发表于2017-09-15 09:36 被阅读0次

    参考实例代码:http://jsfiddle.net/yyx990803/L7hscd8h/

                             http://jsfiddle.net/yyx990803/4xfa2f19/ 

    动态路由:某种模式匹配到的所有路由,全都映射到同个组件

    eg:

    const User = { template : ' <div> User <div> '}

    const router = new vueRouter({ routes : [{

         path : ' /user/:id ',         // 动态路由参数,以 ‘ : ’ 开头,当匹配到一个路由时,参数值     会被设置到 this.$route.params,可在每个组件内使用(const user = { template : '<div>user {{ $route.params.id }} </div>'})下附$route参数表

         component : User

    }]})


    $route参数表

    嵌套路由 : 一个被渲染组件可以包含自己的嵌套 <router-view>

    const user = { template :' <div> user {{ $route.params.id }}

                                             <router-view><router-view>

                            </div>'}

    要在页面中渲染嵌套的 <router-view>,需要在 vueRouter 的参数中使用 children 配置

    以 / 开头的嵌套路径会被认为是根路径

    命名视图:当页面上需要同时显示多个视图时。

    eg:https://jsfiddle.net/posva/6du90epg/


    相关文章

      网友评论

          本文标题:动态路由 & 嵌套路由

          本文链接:https://www.haomeiwen.com/subject/nzxcsxtx.html