Vue —— 进阶 vue-router 路由（一）（嵌套路由、query参数、命名路由、params参数、props配置）

已于 2022-08-31 19:17:41 修改
阅读量1.5k 收藏 16
点赞数 8
分类专栏： Vue2 文章标签： vue.js javascript 前端
于 2022-05-22 20:35:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45902692/article/details/124912208
版权

Vue2.x 系列文章目录

内容参考链接
Vue2.x - 基础Vue2.x - 基础
Vue2.x - 进阶Vue2.x - 进阶脚手架
Vue2.x - 高级 VuexVuex概念、工作原理、环境搭建、基本使用、getters
Vue2.x - 高级 VuexVuex 四个 map 的用法、模块化和命名空间
Vue2.x - 高级 Vue-router路由的概念、基本使用
Vue2.x - 高级 Vue-router嵌套路由、query参数、命名路由、params参数、props配置
Vue2.x - 高级 Vue-routerreplace属性、编程式路由导航、缓存路由组件、路由的专属钩子
Vue2.x - 高级 Vue-router全局路由守卫
Vue3.0 - 新增Vue3.0 新增内容
Vue2.x 项目（附源码）Vue + ElementUI 后台管理项目（附源码）
Vue3.0 项目Vue3.0 企业级 App

文章目录

一、嵌套路由（多级路由）
1. 配置路由规则

使用 children 配置项

	routes: [{
        path: '/about',
        component: About
      },
      {
        path: '/home',
        component: Home,
        children: [{ //通过children配置子级路由
              path: 'news', //此处没有 /
              component: News
            },
            {
              path: 'message', //此处没有 /
              component: Message
         }]
     }]
2. 跳转（写完整路径）
	<router-link to="/home/news">News</router-link>
3. 实例：嵌套路由

嵌套路由

index.js

  1. 给 home 通过 children 配置子级路由
  2. path里面不加 /
  3. component 并没有 s，因为都是一个组件
	import VueRouter from "vue-router";
	// 引入组件
	import About from '../pages/About.vue'
	import Home from '../pages/Home.vue'
	import News from '../pages/News.vue'
	import Message from '../pages/Message.vue'
	
	// 创建并暴露一个路由器
	export default new VueRouter({
	  routes: [{
          path: '/about',
          component: About
        },
        {
          path: '/home',
          component: Home,
          children: [{ //通过children配置子级路由
                path: 'news', //此处没有 /
                component: News
              },
              {
                path: 'message', //此处没有 /
                component: Message
              }]
         }]
	})

News.vue

  1. 显示 news 内容的组件
	<template>
	  <ul>
	    <li>news001</li>
	    <li>news002</li>
	    <li>news003</li>
	  </ul>
	</template>
	
	<script>
	export default {
	  name: "myNews",
	};
	</script>

Message.vue

  1. 显示 message 内容的组件
	<template>
	  <div>
	    <ul>
	      <li><a href="/message1">message001</a>&nbsp;&nbsp;</li>
	      <li><a href="/message2">message002</a>&nbsp;&nbsp;</li>
	      <li><a href="/message/3">message003</a>&nbsp;&nbsp;</li>
	    </ul>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "myMessage",
	};
	</script>

Home.vue

  1. 注意路径要写全，/home/news、/home/message
	<template>
	  <div>
	    <h2>Home组件内容</h2>
	    <div>
	      <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>
	      <router-view></router-view>
	    </div>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "myHome",
	};
	</script>
二、路由的 query 参数
1. 传递参数

方法一：to 的字符串写法，v-bind 绑定 to，地址和值用模板字符串包裹。

	<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}！`">{{ m.title }}</router-link>

方法二：to 的对象写法，v-bind 绑定 to，在对象中配置 path 和 query，path 是路径，query 里面是参数。

	<router-link :to="{
      path: '/home/message/detail',
      query: {
        id: m.id,
        title: m.title 
      }
    }">{{ m.title }}</router-link>
2. 接收参数
	$route.query.id
	$route.query.title
3. 实例：路由的 query 参数

路由的query参数

index.js

  1. 在 index.js 的 Message 中添加 Detail 子级
	import Detail from '../pages/Detail.vue'
	...
	{
      path: 'message', //此处没有 /
      component: Message,
      children: [
        {
          path: 'detail', //此处没有 /
          component: Detail
        },
      ]
    }

Message.vue

  1. 一般采用对象写法，可读性高
  2. to 要用 v-bind 绑定
  3. path 用于配置路径
  4. query 里面传递参数
	<template>
	  <div>
	    <ul>
	      <li v-for="m in messageList" :key="m.id">
	        <!-- 跳转路由并携带query参数，to的字符串写法 -->
	        <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}！`">{{ m.title }}</router-link> -->
	        
	        <!-- 跳转路由并携带query参数，to的对象写法 -->
	        <router-link :to="{
	          path: '/home/message/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: "myMessage",
	  data() {
	    return {
	      messageList: [
	        { id: "001", title: "消息001" },
	        { id: "002", title: "消息002" },
	        { id: "003", title: "消息003" },
	      ],
	    };
	  },
	};
	</script>

Detail.vue

  1. 接收参数，呈现在页面
	<template>
	  <ul>
	    <li>消息编号：{{$route.query.id}}</li>
	    <li>消息标题：{{$route.query.title}}</li>
	  </ul>
	</template>
	
	<script>
	export default {
	  name: "myDetail",
	  mounted() {
	      console.log(this.$route);
	  },
	};
	</script>
三、命名路由
1. 作用

可以简化路由的跳转

2. 如何使用
  1. 给路由命名：name: 'xxx'
	routes: [{
	    path: '/demo',
	    component: Demo,
	    children: [{
		    path: 'test',
		    component: Test,
		    children: [{
			    name: 'hello'
			    path: 'welcome',
			    component: Hello
			}]
		}]
	}]
  1. 简化跳转
    （1）to 要加 v-bind 绑定
    （2）to 里面是对象的键值对形式，{name: 'xxx'}
	<!-- 简化前，需要写完整的路径 -->
	<router-link to='demo/test/welcome'>跳转</router-link>
	<!-- 简化后，直接通过名字跳转 -->
	<router-link :to='{name: 'hello'}'>跳转</router-link>

	<!-- 简化写法配合query传递参数 -->
	<router-link
		:to="{
			name: 'hello',
			query: {
				id: 666,
				title: '你好'
			}
		}"
	>跳转</router-link>
四、路由的 params 参数
1. 配置路由

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

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

to 的字符串写法

	<!-- 跳转并携带params参数，to的字符串写法 -->
	<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link>

to 的对象写法

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

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

3. 接收参数
	$route.params.id
	$route.params.title
4. 实例：路由的 params 参数

路由的params参数

index.js

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

Message.vue

	<template>
	  <div>
	    <ul>
	      <li v-for="m in messageList" :key="m.id">
	        <!-- 跳转路由并携带params参数，to的字符串写法 -->
	        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link> -->
	        <!-- 跳转路由并携带params参数，to的对象写法 -->
	        <router-link :to="{
	          name: 'xiangqing',
	          params: {
	            id: m.id,
	            title: m.title 
	          }
	        }">
	          {{ m.title }}
	        </router-link>
	      </li>
	    </ul>
	    <hr />
	    <router-view></router-view>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "myMessage",
	  data() {
	    return {
	      messageList: [
	        { id: "001", title: "消息001" },
	        { id: "002", title: "消息002" },
	        { id: "003", title: "消息003" },
	      ],
	    };
	  },
	};
	</script>

Detail.vue

	<template>
	  <ul>
	    <li>消息编号：{{$route.params.id}}</li>
	    <li>消息标题：{{$route.params.title}}</li>
	  </ul>
	</template>
	
	<script>
	export default {
	  name: "myDetail",
	  mounted() {
	      console.log(this.$route);
	  },
	};
	</script>
五、路由的 props 配置
1. 作用

让路由组件更方便的收到数据

2. 三种写法
（1）第一种写法
  1. 第一种写法：props 的值为对象。该对象中的所有 key-value 都会以 props的形式传给 Detail 组件。
  2. 注意：使用的少，因为传递的是死数据。
	//语法：
	props:{a: 1, b: 'hello'}

index.js

	children:[{
      name: 'xiangqing',
      path: 'detail/:id/:title',
      component: Detail,
      props:{a: 1, b: 'Hello'}
    }]

Detail.vue

	<template>
	  <ul>
	    <li>消息编号：{{$route.params.id}}</li>
	    <li>消息标题：{{$route.params.title}}</li>
	    <li>a:{{a}}</li>
	    <li>b:{{b}}</li>
	  </ul>
	</template>
	 
	<script>
	export default {
	  name: "myDetail",
	  props: ['a','b'],
	  mounted() {
	      console.log(this.$route); 
	  },
	};
	</script>

在这里插入图片描述

（2）第二种写法
  1. 第二种写法，值为布尔值。若布尔值为真，就会把该路由组件收到的所有 params 参数，以 props 的形式传给 Detail 组件。
  2. 注意：只能传递 params 参数，不会传递 query 参数。
	//语法：
	props: true

index.js

	children:[{
      name: 'xiangqing',
      path: 'detail/:id/:title',
      component: Detail,
      props: true
    }]

Detail.vue

	<template>
	  <ul>
	    <li>消息编号：{{id}}</li>
	    <li>消息标题：{{title}}</li>
	  </ul>
	</template>
	 
	<script>
	export default {
	  name: "myDetail",
	  props: ['id','title'],
	  mounted() {
	      console.log(this.$route); 
	  },
	};
	</script>

在这里插入图片描述

（3）第三种写法
  1. props 的第三种写法，值为函数。该函数返回的对象中每一组 key-value 都会通过 props 传给 Detail 组件。
  2. 该写法既能传递 params 参数，也能传递 query 参数。
	props($route){
	  return {
		id: $route.query.id,
		title: $route.query.title
	  }
	}

index.js

	props($route) {
	  return {
		id: $route.query.id,
		title: route.query.title
	  }
	}

	//简写方式，解构
	props({params}) {
      return {id: params.id, title:params.title}
    }

	//进一步简写（可读性差，不推荐）
	props({params: {id, title}}) {
      return {id, title}
    }

Detail.vue

	<template>
	  <ul>
	    <li>消息编号：{{id}}</li>
	    <li>消息标题：{{title}}</li>
	  </ul>
	</template>
	 
	<script>
	export default {
	  name: "myDetail",
	  props: ['id','title'],
	  mounted() {
	      console.log(this.$route); 
	  },
	};
	</script>

在这里插入图片描述
不积跬步无以至千里 不积小流无以成江海

点个关注不迷路，持续更新中…

前端杂货铺
关注
专栏目录
Vue3 - 路由 Vue-router 4.X（配置与使用教程）
王佳斌
11-30 3849
vue3 路由官方文档，vue3 路由文档，vue-router4 官方文档，使用Vite构建Vue3项目,对路由Vue Router，Vue3中 Vue Router4路由的配置，vue3-vueRouter v4.x， vue3 中 vue-router4 基本使用(路由基本配置)，Vue3 - Router@4.x使用，vue-router4.x教程，Vue 3 中基于 vue-router 4 的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3) ，10分钟快速上手VueR
vue-router 动态路由-props获取参数
caoxinjian423的博客
10-06 2000
router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue' import NotFound from '../views/NotFound.vue'; Vue.use(VueRouter) const routes = [ { path: '/',
vue-router（params，props，query）
qq_60976312的博客
12-23 1005
vue-router（params，props，query） 路由的query参数 路由params参数 路由的props配置 router-link的replace属性 编程式路由导航 缓存路由组件 两个新的生命周期钩子
Vue Router query 命名路由 params props
qq_49184510的博客
06-22 168
1. 传递参数 2.接收参数 src/router.index.js src/pages/Message.vue src/pages/Detail.vue 2. 命名路由 1. 作用：可以简化路由的跳转2. 如何使用 a. 给路由命名 b. 简化跳转 src/router/index.js src/pages/Message.vue 3. 路由的 params
vue 路由组件不重新加载
diaohuyi6830的博客
11-28 247
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.mi...
vue-router小示例
chthaoren的博客
07-24 202
這是目錄結構： ps：這是上一個Home文件夾裏的index文件，懶得寫別的就直接拿來用了。 <template> <div id="home"> <Content /> <router-link to="/home/text1"> <span>text1</span> </router-link> <router-link to="/home/t
vue嵌套路由传递参数_vue嵌套路由--params传递参数
weixin_39685762的博客
12-20 86
在嵌套路由中，父路由向子路由传值除了query外，还有params，params传值有两种情况，一种是值在url中显示，另一种是值不显示在url中。1、显示在url中index.htmlmain.js params传值是通过:[参数值] 如path:"/home/game/:num"import Vue from 'vue'import VueRouter from'vue-router'Vue....
【Vue】高级系列（九）路由 - vue-router - SPA - 基本路由 - 嵌套路由 - 编程式路由导航
YK菌的博客
02-25 3024
学习Vue-router
VueJs路由跳转——vue-router的使用详解
11-26
在ES5中，首先创建一个VueRouter实例，并传入配置参数： ```javascript var router = new VueRouter(); router.map({ '/view-a': {component: ViewA}, '/view-b': {component: ViewB} }); router.start(App, '#app...
Vue | 路由【路由的简介 +嵌套（多级)路由+路由的query,params参数+命名路由+路由的props配置+router-link的replace属性】
不爱吃菜的菜菜的博客
07-24 1165
vue-rooter是vue的一个插件库，专门用来实现SPA应用。
vue简单项目实例（router方式）
07-04
vue-cli搭建的vue实例，用router和组件的简单实例，下载后请cnpm install后npm run dev运行
基于vue-router的实例案例
weixin_46005715的博客
07-13 425
基本样式如下: <head> <meta charset="UTF-8" /> <title>基于vue-router的实例案例</title> <style type="text/css"> html, body, #app { margin: 0; padding: 0px; height: 100%; } .he
Vue Router使用示例
最新发布
lovoo的博客
03-31 904
Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）映射表：[内网ip1:电脑标识1，内网ip2:电脑标识2]路由器 -> 公网IP -> 映射表 -> 内网IP。创建文件夹 router，创建index.html。特点：单页Web应用，预先加载页面内容。路由包括路由和转发。
vue-router2.0的最简单的例子
kioo_i_see的博客
05-19 1980
vue-router2.0 工作 基础例子
Vue—— 编程式导航——Router实例方法
chengzhangdewo的博客
10-14 863
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。在 Vue 实例内部，可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。 1. router.push(参数) 向 history 栈添加一个新的记录 、 router.push('home') router.push({ path: 'home' }) router.push({ nam...
vue.js路由（vue-router）详解+案例
清风无虑skr的博客
06-18 1628
简介： 对于大多数单页面应用，都推荐使用官方支持的vue-router，其实简单的说路由就是跳转，和HTML<a>标签实现的效果是一样的，都是添加过路径后便可以跳转到相应位置，可能有人会说那还学vue-router干嘛直接用a标签实现不就可以了，这里就要提到vue的优点了，vue-router让构建单页面应用变得易如反掌，而如果使用a标签你需要写好多代码构造页面。(●ˇ∀ˇ●) 安装： 1、通过script标签直接引用 https://unpkg.com/vue-router@2.0.0/dis
vue-router
weixin_41989325的博客
04-28 268
参考学习：https://www.cnblogs.com/SamWeb/p/6610733.html
学习记录502@vue路由传参之query参数
教练我想学编程
12-07 241
传参的两种写法 推荐使用对象写法 <div> <ul> <li v-for="m in messageList" :key="m.id"> <!-- 跳转路由并携带query参数，to的字符串写法 --> <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-lin
vue-router4之路由匹配语法
youhebuke225的博客
06-25 1114
这里我们需要明白一些正则表达式 点击语法在参数后面直接加一个括号，括号中写正则表达式，表示当前参数值匹配什么类型 可重复的参数 传参的时候我们要提供一个数组 sensitive 与 strict 默认情况下，路由不区分大小写，并且能匹配尾部是否有斜线的路由...
Vue Router详解：参数配置、组件耦合与重定向应用
本文将详细介绍Vue Router的基本使用方法，以及如何配置参数、路由组件和实现路由的重定向。 首先，理解`router-link`元素在HTML中的作用。`<router-link>`是一个Vue组件，用于创建可点击的链接，当用户点击时，会...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端杂货铺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值