命名路由
在设置路由规则的时候，可以给路由指定一个name属性。
作用：可以简化路由的跳转
- 给路由命名
// 在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 } ] } ] } ] })
- 简化路由连接跳转
<!-- 简化前，需要写完整的路径 --> <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>
query参数项
在使用路由连接的时候可以通过query选项传递参数，从而实现动态改变路由组件数据的需求
下面的代码将由一个组件动态的展示三个消息
// 在Message组件中 <template> <div> <ul> <li v-for="m in messsageList" :key="m.id"> <!-- 点击路由链接跳转并携带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> </div> </template> <script> export default { name: 'Message', data(){ return { messageList:[ {id='001', title='消息1'}, {id='002', title='消息2'}, {id='003', title='消息3'} ] } } } </script>
// 在Detail组件中 <template> <div> <ul> <!-- 通过$route.query获取到Message组件传递的数据 --> <li>消息编号：{{$route.query.id}}</li> <li>消息标题：{{$route.query.title}}</li> </ul> </div> </template> <script> export default { name: 'Detail' } </script>
params参数项
- 配置路由，声明接收params参数
// 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 } ] } ] } ] })
- 传递参数
// 路由连接跳转并携带参数 <router-link :to="{ name:'xiangqing', params: { id: '666', title:'你好' } }"> 点击跳转 </router-link>
注意：路由携带params参数时，如果路由连接的to是使用对象的写法，则必须使用name来配置跳转地址，而不能使用path来配置
// 在Detail组件中 <template> <div> <ul> <!-- 通过$route.params获取到Message组件传递的数据 --> <li>消息编号：{{$route.params.id}}</li> <li>消息标题：{{$route.params.title}}</li> </ul> </div> </template> <script> export default { name: 'Detail' } </script>
