冇事来学系--Vue2.0中命名路由和路由的query和params

---

theme: Chinese-red

「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」

命名路由

在设置路由规则的时候，可以给路由指定一个name属性。

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

1. 给路由命名

```js // 在src/router/index.js中 export default new VueRouter({ routes:[ { path: '/demo',
component: Demo, children: [ { path: 'test', component: Test, children:[ { name: 'hello', // 设置name属性给路由命名 path:'welcome', component: Hello

}
        ]
      }
    ]
  }      
]

}) ```

2. 简化路由连接跳转

```js 点我跳转

点我跳转

```

query参数项

在使用路由连接的时候可以通过query选项传递参数，从而实现动态改变路由组件数据的需求

下面的代码将由一个组件动态的展示三个消息

```js // 在Message组件中

• <!-- 点击路由链接跳转并携带query参数，采用对象形式的写法 -->
      <!-- 注意要使用v-bind动态绑定，这样属性值会以js表达式的形式去解析 -->     
              <router-link 
                :to="{
                              path:'/home/message/detail',
                              query: {
                                  id: m.id,
                                title: m.title
                              }
                }">
        <!-- 通过v-for中的形参m，动态的指定消息的id和内容 -->
                  {{m.title}}
  
              </router-link>
      </li>
  </ul>
  
  <hr>
  
  <router-view></router-view>

```

```js // 在Detail组件中

• 消息编号：{{$route.query.id}}
• 消息标题：{{$route.query.title}}

```

---

params参数项

1. 配置路由，声明接收params参数

js // src/router/index.js export default new VueRouter({ props:[ { path: '/home', component: Home, children: [ { path: 'news', component: News, children:[ { name: 'xiangqing', path: 'detail/:id/:title', // 使用占位符声明接收params参数(:id和:title) component: Detail } ] } ] } ] })

2. 传递参数

java // 路由连接跳转并携带参数 <router-link :to="{ name:'xiangqing', params: { id: '666', title:'你好' } }"> 点击跳转 </router-link>

注意：路由携带params参数时，如果路由连接的to是使用对象的写法，则 必须使用name来配置跳转地址 ，而不能使用path来配置

```js // 在Detail组件中

• 消息编号：{{$route.params.id}}
• 消息标题：{{$route.params.title}}

```

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖