11.路由嵌套

2019-06-24  本文已影响0人  nora_wang

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
上一篇下一篇

猜你喜欢

热点阅读