美文网首页
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.路由嵌套

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