VueRouter路由传参
1. 前言
本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要,在日常开发中,我们经常会通过路由传递各种参数,同学们在学完本节后可以将小节中的案例自己动手实现一遍,这样才可以加深印象并熟练掌握。
2. params 传参
使用 params 传参数我们可以分为两个步骤:
- 定义路由以及路由接收的参数。
- 路由跳转时传入对应参数。
首先,我们先了解如何定义路由接收的参数:
const routes = [
{ path: '/detail/:name', name: 'detail', component: Detail },
]
使用 <router-link></router-link>
的方式跳转路由:
<!-- router-link 跳转 -->
<router-link :to="{name: 'detail', params: {name: 'React 基础学习'}}">2. React 基础学习</router-link>
具体示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/">首页</router-link>
</div>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/j**ascript">const Detail = Vue.component('detail', {
template: '<div>这是 {{$route.params.name}} 的详情页面</div>'
})
const Article = Vue.component('myArticle', {
template: `<ul>
<li>
<router-link :to="{name: 'detail', params: {name: 'Vue 计算属性的学习'}}">
1. Vue 计算属性的学习
</router-link>
</li>
<li>
<router-link :to="{name: 'detail', params: {name: 'React 基础学习'}}">
2. React 基础学习
</router-link>
</li>
</ul>`
})
const routes = [
{ path: '/detail/:name', name: 'detail', component: Detail },
{ path: '/', component: Article }
]
const router = new VueRouter({
routes: routes
})
var vm = new Vue({
el: '#app',
router: router,
data() {
return {}
}
})</script>
</html>
代码解释:
在 JS 代码第 24 行,我们定义了路由 detail,他通过 params 接收一个参数 name。
在组件 Article 中,我们使用 <router-link>
链接要跳转的路由并将参数传入。
在组件 Detail 中,我们将传入的课程名称显示出来。
使用 $router 的方式跳转路由:
// $router 跳转
this.$router.push({
name: 'detail',
params: {
name: 'Vue 教程'
}
})
具体示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/">首页</router-link>
</div>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/j**ascript">const Detail = Vue.component('detail', {
template: '<div>这是 {{$route.params.name}} 的详情页面</div>'
})
const Article = Vue.component('myArticle', {
template: `<ul>
<li @click="getDetail('Vue 计算属性的学习')">
1. Vue 计算属性的学习
</li>
<li @click="getDetail('React 基础学习')">
2. React 基础学习
</li>
</ul>`,
methods: {
getDetail(name) {
this.$router.push({
name: 'detail',
params: {
name: name
}
})
}
}
})
const routes = [
{ path: '/detail/:name', name: 'detail', component: Detail },
{ path: '/', component: Article }
]
const router = new VueRouter({
routes: routes
})
var vm = new Vue({
el: '#app',
router: router,
data() {
return {}
}
})</script>
</html>
代码解释:
在 JS 代码第 31 行,我们定义了路由 detail,他通过 params 接收一个参数 name。
在 JS 代码第 19 行,我们定义了方法 getDetail,该方法通过 $router.push 跳转到详情页面,并传入 name 参数。
在组件 Article 中,我们当点击课程名称的时候调用 getDetail 方法。
在组件 Detail 中,我们将传入的课程名称显示出来。
3. query 传参
使用 query 传参的方法相对简单,只需要在对应路由跳转的时候传入参数即可:
使用 <router-link></router-link>
的方式跳转路由:
<!-- router-link 跳转 -->
<router-link :to="{path: '/detail', query: { id: 1 }}">2. React 基础学习</router-link>
具体示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/">首页</router-link>
</div>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/j**ascript">const Detail = Vue.component('detail', {
template: '<div>这是 id 为 {{$route.query.id}} 的详情页面</div>'
})
const Article = Vue.component('myArticle', {
template: `<ul>
<li>
<router-link :to="{path: '/detail', query: {id: 1}}">
1. Vue 计算属性的学习
</router-link>
</li>
<li>
<router-link :to="{path: '/detail', query: {id: 2}}">
2. React 基础学习
</router-link>
</li>
</ul>`
})
const routes = [
{ path: '/detail', component: Detail },
{ path: '/', component: Article }
]
const router = new VueRouter({
routes: routes
})
var vm = new Vue({
el: '#app',
router: router,
data() {
return {}
}
})</script>
</html>
代码解释:
在组件 Article 中,我们使用 <router-link>
链接要跳转的路由并将参数传入。
在组件 Detail 中,我们通过 $route.query.id 将传入的课程 ID 显示出来。
使用 $router 的方式跳转路由:
// $router 跳转
this.$router.push({
path: '/detail',
query: {
id: 2
}
})
具体示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/">首页</router-link>
</div>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/j**ascript">const Detail = Vue.component('detail', {
template: '<div>这是 id 为 {{$route.query.id}} 的详情页面</div>'
})
const Article = Vue.component('myArticle', {
template: `<ul>
<li @click="getDetail(1)">1. Vue 计算属性的学习</li>
<li @click="getDetail(2)">2. React 基础学习</li>
</ul>`,
methods: {
getDetail(id) {
this.$router.push({
path: '/detail',
query: {
id: id
}
})
}
}
})
const routes = [
{ path: '/detail', component: Detail },
{ path: '/', component: Article }
]
const router = new VueRouter({
routes: routes
})
var vm = new Vue({
el: '#app',
router: router,
data() {
return {}
}
})</script>
</html>
代码解释:
在 JS 代码第 19 行,我们定义了方法 getDetail,该方法通过 $router.push 跳转到详情页面,并通过 query 传入参数 id。
在组件 Article 中,我们当点击课程名称的时候调用 getDetail 方法。
在组件 Detail 中,我们通过 $route.query.id 将传入的课程 ID 显示出来。
4. 小结
本节,我们带大家学习了路由传参的两种方式。主要知识点有以下几点:
- 通过 params 传递参数。
- 通过 query 传递参数。
相关文章
- (尚043) vue_向路由组件传递数据+vue param和query两种传参方式
- 配置Linux实现静态路由
- 【超树+蝶形】基于的超树结构和蝶形运算单元的无线传感器网络路由算法FPGA实现详解
- Vue - Vue Router 路由跳转及传参方式(声明 / 编程式路由及路由工具函数)
- vue路由获取菜单名称和路由跳转传参
- HCIP第十二天——路由反射器,联邦,BGP选路原则
- vue 3.0 项目搭建移动端 (六) 命名路由同级控制
- Angular 添加路由
- Vue 路由(Router)详细介绍(切换,传参,通信)
- Vue---路由跳转传参
- react路由传参
- vue-router路由传参之query和params
- vue router重定向和别名、路由组件传参
- 【vue create】二.配置Esline、less、nprogress、ant-design-vue、环境变量env、axios、vuex、Router、路由守卫以及登录页
- 场景类:vue多个router-view路由嵌套
- Centos7/RHEL 7 配置静态路由
- express路由、静态托管、ejs模板引擎
- Vue学习第33天——路由守卫(导航守卫)超详解讲解及使用场景、案例练习
- Vue学习第28天——路由传参(query参数和params参数)详解及案例
- RabbitMQ官方中文入门教程(PHP版) 第四部分:路由(Routing)
- CCNA-网络汇总 超网(CIDR) 路由最长掩码匹配
- 计算机网络-转发表和路由选择协议