vue动态路由的addroutes配置(27Vue入门教程VueRouter路由传参)

本小节我们介绍 VueRouter 路由组件传参包括 params 传参、query 传参的两种方式路由传参的知识点非常重要,在日常开发中,我们经常会通过路由传递各种参数,同学们在学完本节后可以将小节中的案例自己动手实现一遍,这样才可以加深印象并熟练掌握,今天小编就来聊一聊关于vue动态路由的addroutes配置?接下来我们就一起去研究一下吧!

vue动态路由的addroutes配置(27Vue入门教程VueRouter路由传参)

vue动态路由的addroutes配置

1. 学习目标

本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要,在日常开发中,我们经常会通过路由传递各种参数,同学们在学完本节后可以将小节中的案例自己动手实现一遍,这样才可以加深印象并熟练掌握。

2. params 传参

使用 params 传参数我们可以分为两个步骤:

  1. 定义路由以及路由接收的参数。
  2. 路由跳转时传入对应参数。 首先,我们先了解如何定义路由接收的参数:

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/javascript"> 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 教程' } }) 代码块1234567

具体示例:

实例演示

<!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/javascript"> 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/javascript"> 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/javascript"> 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 传递参数。
,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页