当前位置: 首页 > article >正文

Vue路由二(嵌套多级路由、路由query传参、路由命名、路由params传参、props配置、<router-link>的replace属性)

目录

  • 1. 嵌套(多级)路由
  • 2. 路由query传参
  • 3. 路由命名
  • 4. 路由params传参
  • 5. props配置
  • 6. `<router-link>`的replace属性

1. 嵌套(多级)路由

  1. pages/Car.vue
<template>
	<ul>
		<li>car1</li>
		<li>car2</li>
		<li>car3</li>
	</ul>
</template>

<script>
	export default {
		name:'Car'
	}
</script>
  1. pages/Music.vue
<template>
	<div>
		<ul>
			<li>
				<a href="/music1">music1</a>&nbsp;&nbsp;
			</li>
			<li>
				<a href="/music2">music2</a>&nbsp;&nbsp;
			</li>
			<li>
				<a href="/music3">music3</a>&nbsp;&nbsp;
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'Music'
	}
</script>
  1. router/index.js。使用children定义嵌套路由的url路径和组件映射规则。嵌套路由的path不用添加/
import VueRouter from 'vue-router'
import About from '../pages/About'
import News from '../pages/News'

// 引入组件
import Car from '../pages/Car'
import Music from '../pages/Music'

export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/news',
			component:News,
			// 嵌套路由
			children:[
				{
					path:'car',
					component:Car
				},
				{
					path:'music',
					component:Music
				}
			]
		}
	]
})
  1. News.vue。使用<router-link>标签进行路由的跳转,嵌套路由的to路径为url全路径。使用<router-view>标签显示激活的组件
<template>
  <div>
    <h2>我是News的内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link class="list-group-item" active-class="active" to="/news/car">Car</router-link>
        </li>
        <li>
          <router-link class="list-group-item" active-class="active" to="/news/music">Music</router-link>
        </li>
      </ul>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
	export default {
		name:'News'
	}
</script>
  1. 启动项目。点击Car,页面的url变成了http://localhost:8080/music1#/news/car,但是并没有重新加载一次页面。页面显示如下。导航栏的Car激活css样式,而且内容区显示Car组件的内容

Car组件

点击Music,页面的url变成了http://localhost:8080/music1#/news/music,但是并没有重新加载一次页面。页面显示如下。导航栏的Music激活css样式,而且内容区显示Music组件的内容
Music组件

2. 路由query传参

  1. Music.vue
    • for循环出3个超链接,超链接的url都是一样,就是传递的参数不一样
    • 有两种传参方式。一种是字符串写法;一种是对象写法
    • 通过<router-view>标签显示激活的Detail组件。虽然都是同一个组件,但是Detail组件由于接收的参数不一样,所以显示的内容也不一样
<template>
  <div>
    <ul>
      <li v-for="m in musicList" :key="m.id">
        <!-- 跳转路由并携带query参数,to的字符串写法 -->
        <!-- <router-link :to="`/news/music/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

        <!-- 跳转路由并携带query参数,to的对象写法 -->
        <router-link :to="{
					path:'/news/music/detail',
					query:{
						id:m.id,
						title:m.title
					}
				}">
          {{ m.title }}
        </router-link>

      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Music',
  data() {
    return {
      musicList: [
        {id: 1, title: 'music1'},
        {id: 2, title: 'music2'},
        {id: 3, title: 'music3'}
      ]
    }
  }
}
</script>
  1. Detial.vue。通过$route属性接收传递过来的参数
<template>
	<ul>
		<li>消息编号:{{$route.query.id}}</li>
		<li>消息标题:{{$route.query.title}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail'
	}
</script>
  1. src/router/index.js
import VueRouter from 'vue-router'

import About from '../pages/About'
import News from '../pages/News'
import Car from '../pages/Car'
import Music from '../pages/Music'

// 引入组件
import Detail from '../pages/Detail'

export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/news',
			component:News,
			children:[
				{
					path:'car',
					component:Car
				},
				{
					path:'music',
					component:Music,
					children:[
						{
							path:'detail',
							component:Detail
						}
					]
				}
			]
		}
	]
})
  1. 启动项目。点击music1,页面的url变成了http://localhost:8080/#/news/music/detail?id=1&title=music1,但是并没有重新加载一次页面。页面显示如下。内容区显示Detail组件接收到id=1的相关内容

Detail组件的music1

点击music2,页面的url变成了http://localhost:8080/#/news/music/detail?id=2&title=music2,但是并没有重新加载一次页面。页面显示如下。内容区显示Detail组件接收到id=2的相关内容

Detail组件的music2

点击music3,页面的url变成了http://localhost:8080/#/news/music/detail?id=3&title=music3,但是并没有重新加载一次页面。页面显示如下。内容区显示Detail组件接收到id=3的相关内容

Detail组件的music3

3. 路由命名

应用场景: 当路由嵌套层级很多时,<router-link>的to属性的url路径很长,可以使用路由命名来简化url路径的长度

  1. src/router/index.js如下。给路由映射规则添加name属性
......省略部分......
export default new VueRouter({
	routes:[
        ......省略部分......
		{
			path:'/news',
			component:News,
			children:[
				......省略部分......
				{
					path:'music',
					component:Music,
					children:[
						{
							name:'detail',
							path:'detail',
							component:Detail
						}
					]
				}
			]
		}
	]
})
  1. Music.vue。直接使用name属性,来替换path属性
<template>
  <div>
    <ul>
      <li v-for="m in musicList" :key="m.id">
        <!-- 跳转路由并携带query参数,to的对象写法 -->
        <router-link :to="{
          name:'detail',
					// path:'/news/music/detail',
					query:{
						id:m.id,
						title:m.title
					}
				}">
          {{ m.title }}
        </router-link>

      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>
......省略部分......

4. 路由params传参

  1. Music.vue
    • to的字符串写法,params参数直接拼接在url中
    • to的对象写法,使用params属性传参。这里不能使用path跳转路径,需要使用name跳转路径
<template>
  <div>
    <ul>
      <li v-for="m in musicList" :key="m.id">
        <!-- 跳转路由并携带params参数,to的字符串写法 -->
        <!-- <router-link :to="`/news/music/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

        <!-- 跳转路由并携带params参数,to的对象写法 -->
        <router-link :to="{
          name:'detail',
					params:{
						id:m.id,
						title:m.title
					}
				}">
          {{ m.title }}
        </router-link>

      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>
......省略部分......
  1. src/router/index.js如下。在路由映射规则的path中,需要使用detail/:id/:title给params参数进行占位
......省略部分......
export default new VueRouter({
	routes:[
        ......省略部分......
		{
			path:'/news',
			component:News,
			children:[
				......省略部分......
				{
					path:'music',
					component:Music,
					children:[
						{
							name:'detail',
							path:'detail/:id/:title',
							component:Detail
						}
					]
				}
			]
		}
	]
})
  1. Detail.vue。使用$route.params.id方式接收参数
<template>
	<ul>
		<li>消息编号:{{$route.params.id}}</li>
		<li>消息标题:{{$route.params.title}}</li>
	</ul>
</template>

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

5. props配置

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

  1. src/router/index.js。props有三种接收并传递参数的方式
    1. 值为对象。该对象中的所有key-value都会以props的形式传给Detail组件,传递的值固定
    2. 值为布尔值。若布尔值为真,把该路由组件收到的所有params参数值,以props的形式传给Detail组件
    3. 值为函数。函数自动接收$route参数。同时适用于params和query传参
......省略部分......
export default new VueRouter({
	routes:[
		......省略部分......
		{
			path:'/news',
			component:News,
			children:[
				......省略部分......
				{
					path:'music',
					component:Music,
					children:[
						{
							name:'detail',
							// path:'detail/:id/:title',
							component:Detail,

							// path:'detail',
							// props的第一种写法: 值为对象。该对象中的所有key-value都会以props的形式传给Detail组件,传递的值固定
							// props:{id:1, title:'music1'}

							// path:'detail/:id/:title',
							// props的第二种写法,值为布尔值。若布尔值为真,把该路由组件收到的所有params参数值,以props的形式传给Detail组件
							// props:true

							path:'detail/:id/:title',
							// props的第三种写法,值为函数。函数自动接收$route参数。同时适用于params和query传参。这里同时使用了解构赋值语法
							props({params:{id,title}}){
								return {
									id:id,
									title:title
								}
							}

						}
					]
				}
			]
		}
	]
})
  1. Detail.vue。先使用props接收路由传递过来的参数,然后就可以直接使用了
<template>
	<ul>
     <!-- 常规接收参数值方法 -->
     <!--	<li>消息编号:{{$route.params.id}}</li> -->
     <!--	<li>消息标题:{{$route.params.title}}</li> -->

      <!-- 使用props中的参数值 -->
      <li>消息编号:{{id}}</li>
      <li>消息标题:{{title}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',

    // 使用props接收参数
    props: ['id', 'title']

	}
</script>

6. <router-link>的replace属性

作用:控制路由跳转时,操作浏览器历史记录的模式

浏览器的历史记录有两种写入方式:

  1. push:默认。追加历史记录。可以在浏览器进行访问的前进和后退,因为指针的指向改变了
  2. replace,替换当前指针所在的记录。不可以在浏览器进行访问的前进和后退。开启replace模式:<router-link replace>About</router-link>,或<router-link :replace="true">About</router-link>

http://www.kler.cn/a/307951.html

相关文章:

  • 鸿蒙HarmonyOS 地图不显示解决方案
  • 准确率调整研究中心
  • WordPress HTTPS 配置问题解决方案
  • 蓝桥杯每日真题 - 第7天
  • 21. Drag-Drop拖放操作(二) - 文件、表格和树的拖放实现
  • 封装el-menu
  • 【GIS开发小课堂】写一个高德地图巡航功能的小DEMO
  • 遗传算法及其MATLAB实现
  • Leetcode 字母异位词分组
  • Error: ENOENT: no such file or directory, uv_cwd
  • JVM-内存区域
  • 新装mysql8 并开启外网连接
  • 理解DataLoader
  • Redis——常用数据类型hash
  • 华为地图服务功能概览 -- HarmonyOS自学7
  • 【LeetCode Hot 100】169. 多数元素
  • Python快速入门 —— 第五节:接口开发
  • [项目][WebServer][ThreadPool]详细讲解
  • 猫狗识别大模型——基于python语言
  • C# WPF中实现深拷贝的五种方式
  • 商业银行零售业务数智运营探索与应用
  • BLE 协议之物理层
  • TCP核心机制
  • 数据结构(7.3_2)——平衡二叉树
  • iOS 18 适配 Xcode 16 问题
  • 线性代数(宋浩版)(4)