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

命名路由

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

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

1. 给路由命名

// 在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. 简化路由连接跳转

<!-- 简化前，需要写完整的路径 -->
<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参数项

1. 配置路由，声明接收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
            }
          ]
        }
      ]
    }
  ]
})

2. 传递参数

// 路由连接跳转并携带参数
<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>

跋尾

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