Vue-router—query与命名路由

最新推荐文章于 2024-05-10 18:48:39 发布

糖醋小排顾。

最新推荐文章于 2024-05-10 18:48:39 发布

阅读量153

点赞数 3

分类专栏： Vue学习文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Guuiabc/article/details/128794898

版权

Vue学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

### 4.路由的query参数

1. 传递参数

```vue

   <!-- 跳转并携带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. 接收参数：

```js

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

```

<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">
                <!-- 跳转路由并携带query参数，to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
                <!-- 跳转路由并携带query参数，to的对象写法 -->
                <router-link :to="{
                    path:'/home/message/detail',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">
                    {{m.title}}
                </router-link>
            
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        name:'Message',
        data() {
            return {
                messageList:[
                    {id:'001',title:'消息001'},
                    {id:'002',title:'消息002'},
                    {id:'003',title:'消息003'}
                ]
            }
        },
    }
</script>

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            path:'detail',
                            component:Detail,
                        }
                    ]
                }
            ]
        }
    ]
})

### 5.命名路由

1. 作用：可以简化路由的跳转。

2. 如何使用

1. 给路由命名：

```js

{

path:'/demo',

component:Demo,

children:[

{

path:'test',

component:Test,

children:[

{

name:'hello'//给路由命名

path:'welcome',

component:Hello,

}

]

}

]

}

```

2. 简化跳转：

```vue

      <!--简化前，需要写完整的路径-->
      <router-linkto="/demo/test/welcome">跳转</router-link>
     
      <!--简化后，直接通过名字跳转-->
      <router-link:to="{name:'hello'}">跳转</router-link>
     
      <!--简化写法配合传递参数-->
     <router-link 
        :to="{
           name:'hello',
           query:{
              id:666,
                 title:'你好'
           }
        }"
      >跳转</router-link>

```

export default new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                        }
                    ]
                }
            ]
        }
    ]
})