当前位置： 首页 > news >正文

[Vue]路由传参 命名路由

news 来源：原创 2024/5/17 10:37:58

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

  • 前言
  • 1. 页面组件
    • 1.1 目录结构
    • 1.3 路由配置
    • 1.2 组件
  • 2. 路由 query 传参
    • 2.1 使用 query 传参
      • 2.1.1 to 的字符串写法
      • 2.1.2 to 的对象写法
    • 2.2 组件接收 query 参数
    • 2.3 总结 路由 query 传参
  • 3. 命名路由
    • 3.1 配置命名路由
    • 3.2 使用命名路由
    • 3.3 总结 命名路由
  • 4. 路由 params 传参
    • 4.1 使用 params 参数
      • 4.1.1 设置路由地址占位符
      • 4.1.2 params 参数字符串写法
      • 4.1.3 params 参数对象写法
    • 4.2 组件接收 params 参数
    • 4.3 总结 路由 params 传参
  • 5. 路由的 props 配置
    • 5.1 第一种写法：props值为对象
    • 5.2 第二种写法：props值为布尔值
    • 5.3 第三种写法：props值为函数
    • 5.4 总结 路由的 props 配置
  • 6. `<router-link>`的replace属性

1. 页面组件

1.1 目录结构

在这里插入图片描述

1.3 路由配置

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
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 }
          ]
        }
      ]
    }
  ]
})

1.2 组件

Home.vue

<template>
  <div>
    <h2>Home组件</h2>
    <ul class="nav nav-tabs">
      <li>
        <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
      </li>
      <li>
        <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
      </li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style>
</style>

Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <router-link to="/home/message/detail">{{m.title}}</router-link>&nbsp;&nbsp;
      </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>

<style>
</style>

Detail.vue

<template>
  <div>
    <ul>
      <li>消息编号: {{}}</li>
      <li>消息标题: {{}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Detail'
}
</script>

<style>
</style>

在这里插入图片描述

2. 路由 query 传参

2.1 使用 query 传参

2.1.1 to 的字符串写法

    <ul>
      <li v-for="m in messageList" :key="m.id">
        <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp;
      </li>
    </ul>

2.1.2 to 的对象写法

    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
        <router-link :to="{
          path: '/home/message/detail',
          query: {
            id: m.id,
            title: m.title
          }
        }">
          {{m.title}}
        </router-link>
        &nbsp;&nbsp;
      </li>
    </ul>

2.2 组件接收 query 参数

在路由跳转时通过 query 进行传参，传递的参数会被存放在组件实例对象的 $route
属性上。

Detail.vue

<template>
  <div>
    <ul>
      <li>消息编号: {{}}</li>
      <li>消息标题: {{}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  mounted() {
    console.log(this.$route)
  }
}
</script>

<style>
</style>

在这里插入图片描述

Detail.vue

<template>
  <div>
    <ul>
      <li>消息编号: {{$route.query.id}}</li>
      <li>消息标题: {{$route.query.title}}</li>
    </ul>
  </div>
</template>

在这里插入图片描述

2.3 总结 路由 query 传参

  1. 传递参数

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

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

3. 命名路由

命名路由可以简化使用路由进行跳转时路径的写法。

3.1 配置命名路由

设置命名路由，在配置路由时，为路由添加一个 name 配置项。

router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'

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

3.2 使用命名路由

使用命名路由时，router-link 标签的 to 属性需要使用对象写法，在对象写法中，使用name 替代原来的 path。

Message.vue

		<router-link :to="{
          name: 'messageDetail',
          query: {
            id: m.id,
            title: m.title
          }
        }">
          {{m.title}}
        </router-link>

在这里插入图片描述

3.3 总结 命名路由

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

  2. 如何使用

    1. 给路由命名：

      {
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					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>

4. 路由 params 传参

4.1 使用 params 参数

4.1.1 设置路由地址占位符

router/index.js

        {
          name: 'message',
          path: 'message',
          component: Message,
          children: [
            {
              name: 'messageDetail',
              // :id :title 均为params参数的占位
              path: 'detail/:id/:title',
              component: Detail
            }
          ]
        }

4.1.2 params 参数字符串写法

    <ul>
      <li v-for="m in messageList" :key="m.id">
        <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp;
          {{m.title}}
        </router-link>
        &nbsp;&nbsp;
      </li>
    </ul>

4.1.3 params 参数对象写法

注意：使用 params 进行传参时，路由地址不能使用 path，只能使用 name。即 params 进行传参时使用对象写法只能使用命名路由。

    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
        <router-link :to="{
          name: 'messageDetail',
          params: {
            id: m.id,
            title: m.title
          }
        }">
          {{m.title}}
        </router-link>
        &nbsp;&nbsp;
      </li>
    </ul>

4.2 组件接收 params 参数

在路由跳转时通过 params 进行传参，传递的参数会被存放在组件实例对象的 $route
属性上。

<template>
  <div>
    <ul>
      <li>消息编号: {{$route.params.id}}</li>
      <li>消息标题: {{$route.params.title}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  mounted() {
    console.log(this.$route)
  }
}
</script>

<style>
</style>

在这里插入图片描述

4.3 总结 路由 params 传参

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

    {
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

  2. 传递参数

    <!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

    特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

  3. 接收参数：

    $route.params.id
$route.params.title

5. 路由的 props 配置

5.1 第一种写法：props值为对象

该对象中所有的key-value的组合最终都会通过props传给组件

但是这种写法传递的数据为死数据

router/index.js

        {
          name: 'message',
          path: 'message',
          component: Message,
          children: [
            {
              name: 'messageDetail',
              // :id :title 均为params参数的占位
              path: 'detail/:id/:title',
              component: Detail,
              props: {a: 900, b: 1212}
            }
          ]
        }

Detail.vue

<template>
  <div>
    <ul>
      <li>消息编号: {{$route.params.id}}</li>
      <li>消息标题: {{$route.params.title}}</li>
      <li>a: {{a}}</li>
      <li>b: {{b}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  props: ['a', 'b'],
  mounted() {
    console.log(this.$route)
  }
}
</script>

<style>
</style>

在这里插入图片描述

5.2 第二种写法：props值为布尔值

布尔值为true，则把路由收到的所有params参数通过props传给组件。

router/index.js

        {
          name: 'message',
          path: 'message',
          component: Message,
          children: [
            {
              name: 'messageDetail',
              // :id :title 均为params参数的占位
              path: 'detail/:id/:title',
              component: Detail,
              // props: {a: 900, b: 1212}
              props: true
            }
          ]
        }

Detail.vue

<template>
  <div>
    <ul>
      <li>消息编号: {{id}}</li>
      <li>消息标题: {{title}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  props: ['id', 'title'],
  mounted() {
    console.log(this.$route)
  }
}
</script>

<style>
</style>

在这里插入图片描述

5.3 第三种写法：props值为函数

该函数返回的对象中每一组key-value都会通过props传给组件

Detail.vue

使用 query 传参

        <router-link :to="{
          name: 'messageDetail',
          query: {
            id: m.id,
            title: m.title
          }
        }">
          {{m.title}}
        </router-link>

router/index.js

        {
          name: 'message',
          path: 'message',
          component: Message,
          children: [
            {
              name: 'messageDetail',
              // :id :title 均为params参数的占位
              path: 'detail',
              component: Detail,
              // props: {a: 900, b: 1212}
              // props: true
              props($route) {
                return {
                  id: $route.query.id,
                  title: $route.query.title
                }
              },
              // 直接从 $route 中解构出 query
              // props({query}) {
              //   return {
              //     id: query.id,
              //     title: query.title
              //   }
              // }
            }
          ]
        }

Detail.vue

<template>
  <div>
    <ul>
      <li>消息编号: {{id}}</li>
      <li>消息标题: {{title}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  props: ['id', 'title'],
  mounted() {
    console.log(this.$route)
  }
}
</script>

<style>
</style>

在这里插入图片描述

5.4 总结 路由的 props 配置

​ 作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

6. <router-link>的replace属性

  1. 作用：控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
  3. 如何开启replace模式：<router-link replace .......>News</router-link>

相关文章：

  • Java里过滤器（filter）与拦截器（Interceptor）的区别和使用
  • 优秀后端都应该具备的开发好习惯
  • 身份证后四位是否唯一
  • 《MLB棒球创造营》：走近棒球运动·奥克兰运动家队
  • Node.js——http模块和导出共享
  • 新人入手mac折腾过程中遇到的解决方案
  • 图像语义分割 公开数据集 智能驾驶方向
  • CSDN云IDE初体验 - 有些惊艳
  • 【Linux】软件包管理器yum和编辑器vim(部分动图演示)
  • e智团队实验室项目-第一周-神经网络的学习
  • MySQL：索引的理解及应用
  • vue高级特性总结
  • 【ESP32】19.手机蓝牙风扇控制实验（BluetoothSerial库）
  • 【Git|GitHub|SSH|Sourcetree 下篇】GitHub|Sourcetree|SSH部署及Git-flow工作流
  • python+django医院疫情防控管理系统vue
  • [ 一起学React系列 -- 8 ] React中的文件上传
  • [Vue CLI 3] 配置解析之 css.extract
  • 《Java编程思想》读书笔记-对象导论
  • Date型的使用
  • Github访问慢解决办法
  • HTML5新特性总结
  • Java反射-动态类加载和重新加载
  • Java知识点总结（JavaIO-打印流）
  • laravel5.5 视图共享数据
  • MySQL用户中的%到底包不包括localhost?
  • PHP 程序员也能做的 Java 开发 30分钟使用 netty 轻松打造一个高性能 websocket 服务...
  • Spark in action on Kubernetes - Playground搭建与架构浅析
  • SpiderData 2019年2月23日 DApp数据排行榜
  • tensorflow学习笔记3——MNIST应用篇
  • 第十八天-企业应用架构模式-基本模式
  • 利用jquery编写加法运算验证码
  • 学习笔记TF060:图像语音结合，看图说话
  • MiKTeX could not find the script engine ‘perl.exe‘ which is required to execute ‘latexmk‘.
  • ​DB-Engines 12月数据库排名： PostgreSQL有望获得「2020年度数据库」荣誉?
  • ​如何使用ArcGIS Pro制作渐变河流效果
  • (2020)Java后端开发----（面试题和笔试题）
  • （C）一些题4
  • （pt可视化）利用torch的make_grid进行张量可视化
  • （Redis使用系列） Springboot 使用Redis+Session实现Session共享 ，简单的单点登录 五
  • （ZT)北大教授朱青生给学生的一封信：大学，更是一个科学的保证
  • （二）fiber的基本认识
  • （附源码）springboot优课在线教学系统 毕业设计 081251
  • （六） ES6 新特性 —— 迭代器（iterator)
  • （七）Java对象在Hibernate持久化层的状态
  • （实战篇）如何缓存数据
  • (新)网络工程师考点串讲与真题详解
  • (循环依赖问题)学习spring的第九天
  • （转）大道至简，职场上做人做事做管理
  • (转贴)用VML开发工作流设计器 UCML.NET工作流管理系统
  • *p++,*(p++),*++p,(*p)++区别？
  • *上位机的定义
  • .NET Core/Framework 创建委托以大幅度提高反射调用的性能
  • .NET 表达式计算：Expression Evaluator
  • .NET 反射的使用
  • .net 开发怎么实现前后端分离_前后端分离：分离式开发和一体式发布