theme: Chinese-red
「这是我参与2022首次更文挑战的第16天,活动详情查看:2022首次更文挑战」
命名路由
在设置路由规则的时候,可以给路由指定一个name属性。
作用:可以简化路由的跳转
- 给路由命名
```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
}
]
}
]
}
]
}) ```
- 简化路由连接跳转
```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参数项
- 配置路由,声明接收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 } ] } ] } ] })
- 传递参数
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👩🏻🚀来自一个互联网底层组装员,下一篇再见! 📖