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

动态路由 & 嵌套路由

作者: 树袋熊熊 | 来源:发表于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/


相关文章

  • 动态路由 & 嵌套路由实例

    1.动态路由 注意:动态路由以‘:’开头。$route 参数表见 “ 动态路由 & 嵌套路由 ” 2.嵌套路由 注...

  • vue中的路由

    vue中4中路由包含: 1、动态路由2、嵌套路由3、编程式路由4、命名式路由 1、动态路由 2、嵌套路由 3、编程...

  • Vue-router2.0基础实践

    基础用法: 动态路由匹配: 嵌套路由: 编程式路由: 命名路由: 命名视图:

  • Vue路由全解

    路由基础 router-link router-view router.js 动态路由匹配 嵌套路由 命名路由 命...

  • Vue路由

    配置路由文件 index.js 路由文件注入到main.js文件中 组件中配置路由跳转 嵌套路由 动态路由匹配 一...

  • nuxt基础

    路由跳转 动态路由 对应会自动生成如下路由 路由参数校验 返回布尔值,false则跳转到404页面 嵌套路由

  • Vue 路由基础

    router-link 和 route-view 组件 路由配置2.1. 动态路由2.2. 嵌套路由2.3. 命名...

  • vue路由

    配置 引入 html js 动态路由 嵌套路由 编程式导航 router.push(location) route...

  • 动态路由 & 嵌套路由

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

  • vue嵌套路由

    嵌套路由 定义:路由中嵌套子路由,子路由中关键属性children例: 页面上 路由中

网友评论

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

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