美文网首页
11.路由嵌套

11.路由嵌套

作者: nora_wang | 来源:发表于2019-06-24 11:19 被阅读0次

1.一个组件中包含子路由,就会出现路由嵌套。
这时就需要给子路由配置路径。子路由的路径可以直接写最终路径,其上级路径都会根据其父路径相对应补全。路由中redirect的值规定了默认显示的子路由路径。

{
            path: '/hello',
            name: 'HelloWorld',
            component: HelloWorld,
            redirect:'/hello/java',
            children:[{
                path:'java',
                name:'java',
                component:java
            },{
                path:'web',
                name:'web',
                component:web
            },{
                path:'php',
                name:'php',
                component:php
            }
            ]

        }

**2.路由传参
1.直接在配置路由路径后添加参数(传入两个参数名,count和name)

{
            path: '/index/:count/:name',
            name: 'index',
            component: index
        }

组件中给当前路径中的参数赋值

 <!--传递参数-->
<li><router-link :to="{name:'index',params:{count:2}}">index</router-link></li>

若需在当前组件中获取传入的参数值。

{{ $route.params.count }}

2.另一种传参形式(/index?count=2...)
路由配置中:

        {
            path: '/home',
            name: 'home',
            props:(route)=>({
                query:route.query.count
            }),
            component: home
        }

组件当中:

<li><router-link :to="{name:'home',query:{count:2}}">home</router-link></li>

若需在当前组件中获取传入的参数值。

{{ $route.query.count }}

获取路由地址

this.$route.path

相关文章

  • 11.路由嵌套

    1.一个组件中包含子路由,就会出现路由嵌套。这时就需要给子路由配置路径。子路由的路径可以直接写最终路径,其上级路径...

  • 二、vue基础-路由(重要)

    嵌套路由 嵌套路由需求场景 实际开发中的应用界面,通常由多层嵌套的组件组合而成 嵌套结构要对应着嵌套路由(通过路由...

  • vue嵌套路由与404重定向实现方法分析

    第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由...

  • vue嵌套路由

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

  • Vue嵌套路由和路由守卫

    嵌套路由 路由守卫

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

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

  • vue-routes 基础(一)

    路由常用技巧 更新:2020-12-25 获取当前路由 路由监听(路由地址变化时才执行) 嵌套路由 嵌套路由其实就...

  • vue中的路由

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

  • vue3嵌套路由(后台管理系统)

    如何设计一个后台管理系统的路由呢?这里就需要使用到嵌套路由。 嵌套路由 带children的嵌套路由可以有页面,也...

  • 3.路由vue-router

    设置路由 两种写法 路由跳转 嵌套路由

网友评论

      本文标题:11.路由嵌套

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