vue动态路由指的是什么该如何配置
更新:HHH   时间:2023-1-7


今天小编给大家分享一下vue动态路由指的是什么该如何配置的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

在vue中,动态路由就是将匹配某种模式下的路由映射到同个组件中,动态路由的本质就是通过url进行传参;可以通过“params”和“query”两种方式来传递动态参数。

本文操作环境:windows10系统、Vue2.9.6版,DELL G3电脑。

vue动态路由是什么意思

动态路由的理解

动态路由就是把匹配某种模式下的路由映射到同个组件中,其实本质就是通过url进行传参

比如说:有一个商品Goods的组件,我们需要让不同的商品id都映射到这个组件中,此时就需要用到动态路由了。

动态路由的配置

可以通过两种方式来传递动态参数:
(1)、params
(2)、query

注意:以下代码的演示都是在history的路由模式下

params方式的传参

配置路由的方式:使用冒号:绑定动态参数。

//index.js中配置路由信息
const routes = [{
    path: '/goods/:id',
    component: Goods}]

路由跳转时,分为:

(1)使用router-link方式实现路由跳转
此种方式下,一可以使用字符串,在路径后面直接跟上对应的值,如:

二可以使用对象的方式,如:

注意:

  • params方法中,to属性使用对象的方式,必须由name属性引入路由,不能用path。

  • params方法传参时,属性名必须跟配置路由时的动态参数名一致,否则报错。
    (2)、使用$router的方式进行路由的跳转

//方法1
 this.$router.push('/goods/' + this.goodsId)
 //方法2
 this.$router.push({
   name: 'goods',
   params: {
     id: this.goodsId   }})

params方式的传参,对应传参后的url地址如下所示:

获取参数的方式:
$router.params,如本例中想要获取id的值,对应代码为:

$route.params.id
query方式的传参

配置路由时,普通配置即可,即原来怎么配置路由,现在就还怎么配置。如:

const routes = [{
    path: '/goods',
    name: 'goods',
    component: Goods}]

路由跳转时,分为:
(1)使用router-link方式实现路由跳转
query传参的方式只可以通过对象,不可以使用字符串

<router-link :to="{path: '/goods', query: {id: goodsId}}">商品</router-link>

(2)、使用$router的方式进行路由的跳转

this.$router.push({
       path: '/goods',
       query: {
         id: this.goodsId       }
     })
this.$router.push({
       path: '/goods',
       query: {
         id: this.goodsId       }
     })

query方式的传参,对应传参后的url地址显示为:
 

注意:query方式的传参,query对象里面的属性名(如本例中的id)可以随便起名,不像params方式传参时受限。
同时,此种方式下路由的引入既可以使用path属性,也可以使用name属性。
获取参数的方式:
$route.query,如本例中想要获取id 值,代码为:

$route.query.id

总之,千万要注意:
(1)、params方式路由的引入只能用name,query方式路由的引入可以用name和path。
(2)、路由跳转使用 “router”;获取参数使用“route”

以上就是“vue动态路由指的是什么该如何配置”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注天达云行业资讯频道。

返回编程语言教程...