美文网首页
vue学习(50)vue-router(2)

vue学习(50)vue-router(2)

作者: 哆啦C梦的百宝箱 | 来源:发表于2022-04-20 10:26 被阅读0次
  1. 多级路由
    1. 配置路由规则,使用children配置项
routes:[
    {
        path:'/about',
        component:About,
    },
    {
        path:'/home',
        component:Home,
        children:[ //通过children配置子级路由
            {
                path:'news', //此处一定不要写:/news
                component:News
            },
            {
                path:'message',//此处一定不要写:/message
                component:Message
            }
        ]
    }
]
  1. 跳转(要写完整路径):
<router-link to="/home/news">News</router-link>
  1. 路由的query参数
<!-- 跳转并携带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>

接收参数:

$route.query.id
$route.query.title
  1. 命名路由
    1. 作用:可以简化路由的跳转。
    2. 如何使用:
{
    path:'/demo',
    component:Demo,
    children:[
        {
            path:'test',
            component:Test,
            children:[
                {
                      name:'hello' //给路由命名
                    path:'welcome',
                    component:Hello,
                }
            ]
        }
    ]
}

简化跳转

<!--简化前,需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后,直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
    :to="{
        name:'hello',
        query:{
           id:666,
            title:'你好'
        }
    }"
>跳转</router-link>

5.路由的 params参数
1. 配置路由,声明接收params参数

{
    path:'/home',
    component:Home,
    children:[
        {
            path:'news',
            component:News
        },
        {
            component:Message,
            children:[
                {
                    name:'xiangqing',
                    path:'detail/:id/:title', //使用占位符声明接收params参数
                    component:Detail
                }
            ]
        }
    ]
}
  1. 传递参数
<!-- 跳转并携带params参数,to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
                
<!-- 跳转并携带params参数,to的对象写法 -->
<router-link 
    :to="{
        name:'xiangqing',
        params:{
           id:666,
            title:'你好'
        }
    }"
>跳转</router-link>

特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!
接收参数

$route.params.id
$route.params.title

相关文章

网友评论

      本文标题:vue学习(50)vue-router(2)

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