灵魂与肉身有一样要常在路上

大家都在搜：

当前位置：首页 > 程序开发 > Web > VUE3快速入门（11）——路由的嵌套与传参

VUE3快速入门（11）——路由的嵌套与传参

bnbplayer1年前 (2025-03-19)Web3299

![202402081422145633320.png](http://xinz.run/zb_users/upload/2024/02/202402081422145633320.png "202402081422145633320.png")

---

# 1. 嵌套路由
## 1.1 什么是嵌套路由
嵌套路由是指一个路由视图中又包含一个路由视图，通常用于多级分类的SPA。比如一个新闻SPA，分为板块与列表二级。单击不同的板块出现不同的文章列表，再点击列表则出现新闻正文。本文基于上一节内容增加新闻列表和新闻详情的展示功能。
## 1.2 创建显示新闻详情的视图组件
在“\@/views/”路径下，新增一个Content.vue组件，HTML部分如下：
```html
<template>
    <div id="detail">
        <h2>新闻标题</h2>
        <p>这是新闻的具体内容</p>
    </div>
</template>
```
## 1.2 定义新闻数据
修改上一节的News.vue代码的ts部分，增加新闻数据：
```javascript
<script lang="ts" name="News" setup>
    import { ref } from 'vue';
    const news_data = ref([
        {
            id: 1,
            title: '新闻1',
            content: '新闻内容1'
        },
        {
            id: 2,
            title: '新闻2',
            content: '新闻内容2'
        },
        {
            id: 3,
            title: '新闻3',
            content: '新闻内容3'
        },
        {
            id: 4,
            title: '新闻4',
            content: '新闻内容4'
        }
    ]);
</script>
```
## 1.3 新增子路由定义
在路由定义文件的新闻路径下增加一个子路由：
```TypeScript
import Content from '@/views/Content.vue'//新增引入
const router = createRouter({
	history: createWebHashHistory(),
	routes: [
		//...
		{
		name: 'news',
		path: '/news',
		component: News,
		//增加children属性，注意为数组
		children: [
			{
				name: 'content',
				path: 'content',//注意：子路由无需再用“/”
				component: Content,
			}],
		},
		//...
	],
})
```
## 1.4 修改新闻列表视图
修改News.vue的HTML部分如下：
```html
<template>
    <h1>新闻列表</h1>
    <div id="warpper">
        
        <div id="list">
            <ul>
                <li v-for="item in news_data" :key="item.id">
                    <p><RouterLink :to='{path: "/news/content"}'>{{ item.title }}</RouterLink></p>
                </li>
            </ul>
        </div>
        
        <div id="content">
            <RouterView></RouterView>
        </div>
    </div>
</template>
```
注意二级路由的写法。

修改完成后，可以在新闻导航内看到左侧的新闻列表，点击链接在右侧展示的新闻内容。

# 2. 路由传参
上述代码中点击每个新闻链接展示的内容都一样，现在需要根据链接展示不同的新闻，该功能需要用路由传参来实现。
## 2.1 Query传参
路由定义文件见前文。
### 2.1.1 直接字符串拼接（不推荐）
修改New.vue的RouterLink组件调用代码：
```html
<p>
	<RouterLink :to='`/news/content?title=${ item.title }&content=${ item.content }`'>{{ item.title }}</RouterLink>
</p>
```
注意VUE的字符串模板语法：\`...${变量名1}...${变量名2}...\`。
修改Content.vue的代码，取参数：
ts部分：
```javascript
import { useRoute } from 'vue-router'//引入useRoute
import { toRefs } from 'vue'//响应式
const route = useRoute()
const { query } = toRefs(route)//从useRoute中解构query属性，该属性保存了传递的参数。
```
html部分：
```html
<template>
    <div id="detail">
        
        <h2>{{ query.title }}</h2>
        
        <p>{{ query.content }}</p>
    </div>
</template>
```
注意：由于是直接把传递的参数进行动态显示，所以在解构时需要转换为响应式类型。或者不解构，则写法为：
```html
<h2>{{ route.query.title }}</h2>
<p>{{ route.query.content }}</p>
```
### 2.1.2 通过RouterLink组件“to”属性的对象写法
```html
<RouterLink :to=
	"{
		//注意路径
		path: '/news/content',
		//通过query属性传递
		query: {
			title: item.title,
			content: item.content
	}}">{{ item.title }}</RouterLink>
```
## 2.2 Params传参
首先修改路由定义：
```javascript
children: [
	{
		name: 'content',//在Params传参模式下，必须定义name属性
		path: 'content/:title/:content',//注意此处的占位符写法
		component: Content,
	},
],
```
再修改接收的代码。ts部分：
```javascript
import { useRoute } from 'vue-router'
import { toRefs } from 'vue'
const route = useRoute()
const { params } = toRefs(route)//从route对象解构params属性并处理响应式
```
html部分：
```html
<template>
    <div id="detail">
        
        <h2>{{ params.title }}</h2>
        
        <p>{{ params.content }}</p>
    </div>
</template>
```
### 2.2.1 直接字符串拼接（不推荐）
修改New.vue的RouterLink组件调用代码：
```html
<p><RouterLink :to='`/news/content/${ item.title }/${ item.content }`'>{{ item.title }}</RouterLink></p>
```
### 2.2.2 通过RouterLink组件“to”属性的对象写法
```html
<RouterLink :to="{
	name: 'content',//这里必须用name属性
	params: {//指定params
		title: item.title,
		content: item.content
	}
}">{{ item.title }}
```

## 2.3 Props传参
Props传参可以让参数的接收变得更加简化，相当于普通组件的参数接收。先修改路由视图组件，ts部分：
```javascript
defineProps(['title', 'content'])//定义两个属性
```
html部分：
```html
<template>
    <div id="detail">
        <h2>{{ title }}</h2>
        <p>{{ content }}</p>
    </div>
</template>
```
显然，跟普通组件的属性定义写法一模一样。
Props传参又分为布尔值、函数式、对象式三种写法。
### 2.3.1 布尔值写法
布尔值写法用于将**所有params方式传递的参数**传递到路由视图组件。
修改路由定义文件：
```javascript
//@/router/index.js
children: [
	{
		name: 'content',
		path: 'content/:title/:content',
		component: Content,
		props: true//启用props
	},
],
```
### 2.3.2 函数式写法
函数式写法用于传递部分参数，该写法需要自己定义一个名为props的函数，该函数具有一个参数，用于传递route对象，代码如下：
```javascript
children: [
	{
		name: 'content',
		path: 'content/:title/:content',
		component: Content,
		props(r){//参数r的类型为route对象
			return r.params//将所有参数全部传过去，实际上采用布尔型写法更简便
			//或返回部分参数：
			//return r.params.content
		}
	},
],
```
由于函数式写法可以操作route对象，所以可以根据实际情况传递需要使用的一部分参数，而不是一定是所有。如果为传递所有参数，则用布尔值写法更简便。
### 2.3.3 对象式写法
直接传递对象，用处不大：
```javascript
children: [
	{
		name: 'content',
		path: 'content/:title/:content',
		component: Content,
		props: {
			title: 'xxx',
			content: 'xxx'
		}
	},
],
```

# 3. 编程式控制
如果需要高级功能，如自动跳转、自定义路由标签（将RouterLink替换为button标签）、权限检查等，就必须自己实现RouterLink的功能，常见于后端系统。
修改代码，将原本的RouterLink去掉，改为单击按钮查看新闻，同时将新闻标题用普通标签展示。
html部分:
```html
<ul>
	<li v-for="item in news_data" :key="item.id">
		<p>
			<button @click="showContent(item)">查看</button>
			<span>{{ item.title }}</span>
		</p>
	</li>
</ul>
```
ts部分：
```javascript
import { useRouter } from 'vue-router';//注意此处引用的是useRouter
//ts为强类型语言，定义新闻对象类型
interface news_data_type {
        id: number;
        title: string;
        content: string;
}
//实现showContent方法，传递新闻对象类型参数
function showContent(data: news_data_type) {
	router.push(
	{
		name: 'content',
		params: {
		    title: data.title,
		    content: data.content
		}
	});
}
```
Router对象的push方法用于传递一个对象，该对象的写法与通过RouterLink组件“to”属性的对象写法一模一样。也可以用Router对象的replace方法，只是没有历史记录。（关于push与replace的区别参看上一章）

# 4. 总结
1. 子路径在定义时，写在父级路径的“children”属性下，且子路由的path属性不需要以“/”开头；
2. 使用params传参时，定义路由时**必须定义name属性**，同时path属性需要添加占位符，格式为“/:参数1/:参数2...”；
3. 通过RouterLink组件“to”属性的对象写法进行params传参时，**必须使用name属性而不能用path属性**；
4. props传参是在params传参基础上定义的，故在调用RouterLink时，仍然**只能使用name属性**；
5. useRoute()创建的对象是响应式对象，但如果解构则会变成非响应式。如果需要路由参数在界面上更新，则必须用toRef、toRefs处理；
6. 如果需要高级功能，如跳转、鉴权、自定义链接标签（RouterLink实际上被转换为a便签），则需要使用编程式控制路由；
7. 注意useRoute与useRouter。useRoute方法返回一个Route对象， 该对象用于对路由规则进行管理；useRouter返回的是Router对象，用于执行路由动作（如跳转、传值等），可以理解为路由器；注意两者的使用场景。

扫描二维码推送至手机访问。

本文链接：http://xinz.run/post/16.html

标签: VUE

分享给朋友：

返回列表

上一篇：VUE3快速入门（10）——路由的基础使用

没有最新的文章了...

“VUE3快速入门（11）——路由的嵌套与传参” 的相关文章

VUE3快速入门（3）——方法与事件

本文讲述了如何在自定义组件中定义并调用方法，以及绑定DOM事件响应的方法。 1. 自定义方法1.1 定义一个方法在<script>标签内的setup方法内增加一个add方法，该方法传入两个参数，用于求和： function add(a: number, b: number): number{ return a + b; } 同时，将add方法暴露（返回）： return {author, mail, tel, add};//author, mail, tel是上一节定义的变量 1.2 调用方法在<template>标签内，适当位置增加一个标签，用于调用方法： <h2>调用add方法： {{add(1,1)}}</h2> 1.3 查看结果编译、构建成功后，浏览器新出现“调用add方法： 2”的字样，说明求和方法被成功调用。 2. 绑定事件前端开发少不了处理DOM事件，如单击、获得焦点等。本节将讲述如何绑定常见的web标签事件。 2.1 绑定一个事件在<template>标签内，适当位置增加一个按钮，绑定click方法： <button @click="show(tel)">点我</button> 单击会调用test函数，并传入tel的值，该值在上一节已经定义： let author = "Jesse"; let mail = "3898xxxx@qq.com"; let tel = "136****615"; 2.2 完善事件处理方法在<script>标签内setup方法内，再增加show方法，该方法具有一个传输参数： function show(content: any): any { alert(content); } 同时记得暴露该方法： return {author, mail, tel, add, show};//author, mail, tel是上一节定义的变量 2.3 执行编译、构建成功后，浏览器会出现一个按钮，点击按钮，将弹出对话框，其内容是tel变量的内容。 3. 总结方法与变量一样需要写在methods属性内。@click=”<方法名>”其实是v-on:click=”<方法名>”的简写。除了click外，还有submit、scroll的其他的DOM事件均可采用此方法进行事件处理。 4. 拓展学习与思考除了v-on指令外，学习v-if、v-show、v-for的用法。尝试处理submit、onfocus等其他常见DOM事件。...

VUE3快速入门（8）——属性

本文讲述了组件属性的实现方法，以及如何限制属性的数据类型。 1. 什么是组件的属性组件的属性是指可以由组件的调用者动态设置的参数，组件在运行时根据这些参数展现调用者需要的数据。组件的属性等同于HTML标签的属性。 2. 最简单的一个属性本节实现一个展现员工信息的列表，第一步先传入一个“department”属性用于显示员工所属的部门。 2.1 属性的定义定义属性： import { defineProps } from "vue";//引入defineProps，该函数属于宏函数，实际无需引入 let props = defineProps(["department"]);//声明department为一个属性 defineProps方法传入一个字符串数组，其内容是将要被设为属性的变量名称。该方法同时返回一个对象，该对象由传入该组件所有属性的名称和值组成。模板部分： <template> <p>所属部门： {{ department }}</p> </template> 2.2 使用组件并设置属性<WorkerTable department="宣传科"></WorkerTable> 3. 强制类型限定接下来新增一个属性：data，该属性是描述员工信息的数组，用于表格展示。其中模板部分如下： <template> <h1>所属部门:{{ department }}</h1> <table id="main"> <thead> <tr> <th scope="col">员工号码</th> <th scope="col">姓名</th> <th scope="col">性别</th> <th scope="col">电话</th> </tr> </thead> <tbody> <tr v-for=" (item, index) in data" :key="item.id"> <th scope="col">{{ item.id }}</th> <td scope="col">{{ item.name }}</td> <td scope="col">{{ item.sex ? '男' : '女' }}</td> <td scope="col">{{ item.tel }}</td> </tr> </tbody> </table> </template> 根据模板的展示需求，员工信息需要包括ID、姓名、性别、电话等字段，如果上级组件传入的属性数据不符合员工字段的要求，则组件会出现显示异常。为避免这样的问题，需要检查属性数据的类型，当类型不符合要求时，禁止上级组件的属性赋值。 3.1 定义新类型利用TS的接口类，定义一个员工数据类型，并导出：（建议新建一个名为WorkerTable的文件夹，该文件夹包含一个子文件夹src，用于存放组件的辅助代码，而组件的入口文件则与src同级） //file：@/component/WorkerTable/src/IWorker.ts export interface IWorker{ // 序列号 id: number, // 姓名 name: string, // 性别 sex: boolean, // 电话(可选) tel?: string } export type IWorkerArray = IWorker[]; 该文件定义了一个员工类：IWorker以及它的数组类型：IWorkerArray。 3.2 类型检查修改组件TS代码： import { type IWorkerArray } from "@/components/WorkerTable/src/IWorker"; defineProps<{department: string, data: IWorkerArray}>();//通过泛型进行类型检查并声明属性上述代码有两个注意点：引入类型需要使用type关键字通过泛型的方式进行类型检查时，所有属性均需进行类型检查（要么所有，要么都不） 3.3 属性赋值最后调用该组件的TS部分： import WorkerTable from '@/components/WorkerTable/WorkeTable.vue'; import { ref } from "vue"; let workers = ref([ {id: 1234, sex: true, name: "张三", tel: "13600000000"}, {id: 1235, sex: false, name: "李四", tel: "13600000001"}, {id: 1235, sex: false, name: "王五", tel: "13600000002"}, {id: 1234, sex: false, name: "赵六"} ]); 也可以向ref（reactive）传递泛型，在此处限定workers的类型： import { type IWorkerArray } from '@/components/WorkerTable/src/IWorker'; import { ref } from "vue"; let workers = ref<IWorkerArray>(...); 但由于WorkerTable组件已经进行了类型检查，因此上述代码的写法似乎没必要。模板部分： <WorkerTable department="办公室" :data="workers"></WorkerTable> 注意：当传入的属性不符合类型要求时，代码将无法运行，避免显示异常。属性的“：”表示后面的内容作为表达式解析，如果不加“：”，则将会把“worker...

关于“拓源纯净主题”引发的Undefined array key "pro" 的修复

本博客使用的是由拓源推出的“纯净主题”。目前发现一个由于IP查询接口触发的问题，导致主题需要显示IP归属地的页面（如留言、评论页等）会出现如下错误：经检查，该主题的 tpure_IP函数使用了一个“https://whois.pconline.com.cn/ipJson.jsp” 接口查询IP归属地，但该接口不稳定，时常返回空，所以触发了上述问题。修改方式如下： 1 定位到函数在该主题的安装目录下（位置：/zblog的安装目录/zb_users/theme/tpure）,打开includes.php 在编辑器中按“Ctrl+F”搜索函数：tpure_IP。找到如下代码： function tpure_IP($ip) { $ch = curl_init(); $url = 'https://whois.pconline.com.cn/ipJson.jsp?ip='.$ip; curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER, false ); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); $location = curl_exec($ch); curl_close($ch); $location = mb_convert_encoding($location, 'utf-8','GB2312'); $location = substr($location, strlen('({')+strpos($location, '({'),(strlen($location) - strpos($location, '})'))*(-1)); $location = str_replace('"',"",str_replace(":","=",str_replace(",","&",$location))); parse_str($location,$ip_location); return $ip_location['pro']; } 2 更换查询接口，实现自己的解析方式在function tpure_IP($ip)代码前增加函数ip_parser($ip)，完整代码如下： function ip_query($ip) { $url = "https://opendata.baidu.com/api.php?query={$ip}&co=&resource_id=6006&oe=utf8";//此处使用百度API $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false ); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); $location = curl_exec($ch); curl_close($ch); $ip_obj = json_decode($location, true); if(0 != count($ip_obj['data']) && array_key_exists('location', $ip_obj['data'][0])) return $ip_obj['data'][0]['location']; else return '未知'; } 注意，该代码一定要放在tpure_IP函数的前面。 3 注释原来的代码，调用新的函数将tpure_IP函数体内的代码全部用/**/注释，并在最后添加ip_query的调用代码，如下： function tpure_IP($ip) { /* $ch = curl_init(); $url = 'https://whois.pconline.com.cn/ipJson.jsp?ip='.$ip; curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER, false ); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); $location = curl_exec($ch); curl_close($ch); $location = mb_convert_encoding($location, 'utf-8','GB2312'); $location = substr($location, strlen('({')+strpos($location, '({'),(strlen($location) - strpos($location, '})'))*(-1)); $location = str_replace('"',"",str_replace(":","=",str_replace(",","&",$location))); parse_str($location,$ip_location); return $ip_location['pro']; */ return ip_query($ip); } 相当于不再使用原本的实现，而使用自己的实现，但函数名称不变，保存即可。有动手能力的大佬也可以将API换成其他的，但是解析代码也同样要换。点击下列链接可以下载本人修改好的文件进行替换。请注意备份好源文件！！！include.php...

VUE3快速入门（10）——路由的基础使用

1. 什么是路由路由是指根据不同的URL加载不同的组件，其典型应用是后台页面，点击不同的菜单显示不同的页面。通过使用路由，能实现SPA页面、无刷新加载、部分页面加载的功能，是VUE最为典型的一种功能。 2. 准备工作2.1 搭建导航区与展示区框架本文实现一个功能：导航有三个按钮，分别是“首页”、“新闻”、“关于”。点击三个按钮在展示区显示不同的页面。App.vue代码如下： <template>  <nav> <ol> <li><a href="#">首页</a></li> <li><a>新闻</a></li> <li><a>关于</a></li> </ol> </nav>  <div id="content"></div> </template> 2.2 创建路由视图页在源码目录下新建views目录，用于单独存放路由视图组件，目录内建立Home.vue、News.vue、About.vue，分别对应“首页”、“新闻”、“关于”的具体内容。具体代码略。 2.3 安装路由npm install vue-router 上述代码将会自动安装VUE3的路由组件。 3. 使用路由3.1 定义路由（History模式）在源码目录新建目录router，再创建index.ts文件作为路由定义文件。首先引用路由以及需要使用的路由视图： import { createRouter, createWebHistory } from 'vue-router' //三个准备好的路由视图 import Home from '@/views/Home.vue' import News from '@/views/News.vue' import About from '@/views/About.vue' 其次定义路由，关键是路径与路由视图的对应关系： const router = createRouter({ //路由模式 history: createWebHistory(), //路由映射关系 routes: [ { path: '/home',//路径 component: Home,//加载的组件 }, { path: '/news', component: News, }, { path: '/about', component: About, } ], }) createRouter函数中传入对象的history属性用于指定路由模式为“WebHistory”模式，routes用于指明路径与页面的映射关系，类型为键值对数组。注意：创建路由时，必须指定使用哪一种路由模式。记得将定义好的路由暴露出去 export default router 3.2 加载路由在main.ts入口文件中，引用定义好的路由，在原始代码基础上新增如下代码： import router from '@/router/index' app.use(router)//注意该代码放在const app = createApp(App)之后 3.3 处理视图首先添加引用：import { RouterLink, RouterView } from ‘vue-router’其次将App.vue的a标签替换为RouterLink组件： <li><RouterLink to="/home">首页</RouterLink></li> <li><RouterLink to="/news">新闻</RouterLink></li> <li><RouterLink to="/about">关于</RouterLink></li> 最后在原本要展示内容的位置写上RouterView标签：<RouterView></RouterView> 最终效果：在页面上点击三个按钮，可以看到浏览器地址的路径在变化，同时页面展示区显示了三个按钮对应的页面。 4. 更换路由模式（Hash模式）在上述示例代码中使用了History模式，现在替换为Hash模式。修改路由定义文件@/router/index.js更改引用： import { createRouter, createWebHashHistory } from 'vue-router' //... 更改创建路由的代码： const router = createRouter({ history: createWebHashHistory(),//此处修改为了createWebHashHistory //... }) 此时浏览器中出现了一个“/#/”部分。 5. RouterLink组件“to”属性的两种写法5.1 字符串写法见前文。 5.2 对象写法5.2.1 对象的路径属性代码如下： <li><RouterLink :to="{path:'/home'}">首页</RouterLink></li> <li><RouterLink :to="{path:'/news'}">新闻</RouterLink></li> <li><RouterLink :to="{path:'/about}">关于</RouterLink></li> 该写法传入了一个包含path属性的对象。 5.2.1 对象的名字属性（命名路由）修改路由定义文件，增加name属性： //@/router/index.ts const router = createRouter({ history: createWebHashHistory(), routes: [ { name: 'home', path: '/home', component: Home, } //... ], }) 将对象写法的path属性改为name即可： <li><Rout...

行者无疆

大家都在搜：

VUE3快速入门（11）——路由的嵌套与传参

“VUE3快速入门（11）——路由的嵌套与传参” 的相关文章

VUE3快速入门（3）——方法与事件

VUE3快速入门（8）——属性

关于“拓源纯净主题”引发的Undefined array key "pro" 的修复

VUE3快速入门（10）——路由的基础使用

发表评论

Copyright ©行者无疆 2010-2024.署名-保持一致-不得商用.

Powered By Z-BlogPHP. Theme by TOYEAN.

行者无疆

大家都在搜：

VUE3快速入门（11）——路由的嵌套与传参

“VUE3快速入门（11）——路由的嵌套与传参” 的相关文章

VUE3快速入门（3）——方法与事件

VUE3快速入门（8）——属性

关于“拓源纯净主题”引发的Undefined array key "pro" 的修复

VUE3快速入门（10）——路由的基础使用

发表评论取消回复

Copyright ©行者无疆 2010-2024.署名-保持一致-不得商用.

Powered By Z-BlogPHP. Theme by TOYEAN.

发表评论