动态路由 & 嵌套路由

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

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

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

eg:

const User = { template : '

User
'}

const router = new vueRouter({ routes : [{

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

user {{ $route.params.id }}
'})下附$route参数表

     component : User

}]})


动态路由 & 嵌套路由_第1张图片
$route参数表

嵌套路由 : 一个被渲染组件可以包含自己的嵌套

const user = { template :'

user {{ $route.params.id }}

                                        

                       

'}

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

动态路由 & 嵌套路由_第2张图片

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

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

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


你可能感兴趣的:(动态路由 & 嵌套路由)