Vue 2.x – 多级路由/query传参

3.多级路由(多级路由)

  1. 配置路由规则,使用children配置项:

    routes:[
    {
        path:'/about',
        component:About,
    },
    {
        path:'/home',
        component:Home,
        children:[ //通过children配置子级路由
            {
                path:'news', //此处一定不要写:/news
                component:News
            },
            {
                path:'message',//此处一定不要写:/message
                component:Message
            }
        ]
    }
    ]
  2. 跳转(要写完整路径):

    <router-link to="/home/news">News</router-link>

4.路由的query参数

  1. 传递参数

    <!-- 跳转并携带query参数,to的字符串写法 -->
    <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
    
    <!-- 跳转并携带query参数,to的对象写法 -->
    <router-link 
    :to="{
        path:'/home/message/detail',
        query:{
           id:666,
               title:'你好'
        }
    }"
    >跳转</router-link>
  2. 接收参数:

    $route.query.id
    $route.query.title

    代码

    https://github.com/icrons/Vue-Learn/tree/master/31_src_%E5%A4%9A%E7%BA%A7%E8%B7%AF%E7%94%B1

https://github.com/icrons/Vue-Learn/tree/master/32_src_%E8%B7%AF%E7%94%B1query%E4%BC%A0%E5%8F%82

版权声明:
作者:Ne-21
链接:https://blog.gocos.cn/archives/141.html
来源:云淡风轻
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
Vue 2.x – 多级路由/query传参
3.多级路由(多级路由) 配置路由规则,使用children配置项: routes:[ { path:'/about', component:About, }, { path:'/home&#……
<<上一篇
下一篇>>