前言
在Vue
项目里,去完成左边菜单边栏多级内容的展示,导航的切换,以及内容链接的跳转等,用的都是前端路由vue-router
,它的重要性,不可言喻
下面介绍一下Vue中的路由传参以及路由的prps装备
方法1-运用queHTTPry方法
这儿循环遍字符间距怎么加宽历一个列表为例,query
的方法,跳转的url
后边带着的一些详细的参数,比如下面的带着id
,和name
-
to
字符串的写法
<router-link :to="`/new/detail?id=${item.id}&name=${item.name}`">{{item.name}}</router-link>
-
to
目标的写法
<router-link :to="
{
path: '/new/detail',
query:{
id: item.id,
name: item.name
}
}">{{item.name}}
</router-link>
以上目标的写法,比较于字符串的写法,虽然麻烦了一点,但是比较明晰,当传入的参数比较多时,比较合适,而且陈思思也易维护
如下是完好的组件代码,界说了一个NewCom.vue
的组件
<template>
<div>
<ul>
<li v-for="item in lists" :key="item.id">
<router-link :to="`/new/detail/?id=${item.id}&name=${item.name}`">{{item.name}}</router-link>
</li>
<router-view></router-view>
</ul>
</div>
</template>
<script>
export default {
name: 'NewCom',
data() {
return {
lists: [
{
id: "1",
name: 'IT资源网',
url: 'https://itclan.cn'
},
{
id: '2',
name: 'itclanCoder',
url: 'https://coder.itclan.cn'
},
{
id: '3',
name: '客来影视TV',
url: 'https://video.itclan.cn'
},
{
id: '4',
name: '发卡商城',
url: 'https://faka.itclan.cn'
},
{
id: '5',
name: '爱客来科技',
url: 'https://aikelaidev.cn'
}
]
}
}
}
</script>
<style lang="scss" scoped>
ul,li {
list-style: none;
}
</style>
那组件的另一边怎么去接纳传递过去的参数呢,经过this.$route.query
的方法进行接纳字符间距加宽2磅
<p>{{this.$route.query.id}} {{this.$route.query.name}}</p>
命名路由
在路由跳转时,to
后边跟着途径这种写法是没什么问题的,但会发现,也很麻烦,有时,经过一个称号来标识一个路由,就会显得更便利一些的,特别是在链接一个路由,或是履行一些跳转的时分,你能够在创立Router
实例的时分
在routes
装备中某个路由设置称号,如下代码所示
import VueRouter from "vue-router"
import New from "../components/NewCom.vue";
import About from "../components/AboutCom.vue";
import Detail from "../components/DetaiCom.vue";
// 创立router示例目标
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的称号
path: 'detail',
component: Detail
}
]
},
{
path: '/about',
component: About
}
]
})
export default router;
那么另一边路由跳转时,直接运用name
就能够了,不必写详细的途径path
了的,如下所示
<router-link :to="
{
name: 'detailPage', // 此处运用name就能够了的,其他的不变
query: {
id: item.id,
name: item.name
}
}">{{item.name}}</router-link>
命名路由,其实便是能够简化路由的字符间距在哪里设置跳转
<!--简化前,需求填写完好的途径-->
<router-link to="/new/detail"></router-link>
<!-- 简化后,直接经过姓名跳转 -->
<router-link :to="{name:'detailPage'}"></router-link>
<!--简化写法合作query传递参数-->
<router-link :to="{
name: 'detailPage',
query: {
id: '111',
name: 'itclan.cn'
}
}">
</router-link>
引荐运用命名路由,在调试和寻找组件的时分,能够字符间距根据路由的姓名,排查问题
方法2-路由的params参数
这个长生十万年路由的params
参http 302数,简略一点来说便是途径的的参数,并不是像quer科技霸主从带娃开始y
一陈思思样那么直观,而是如下所示,途径最终边的/1/IT资源网
是params
参数,它是动态的
http://localhost:8080/#/new/detail/1/IT资源网
在官方文档里HTTPS,这种被北城动态路由的匹配,便是把某种方法匹配到的所有路由,全都映射到同长沙师范学院一个组件上,比如这个detail
组http://www.baidu.com件
关于所有id
各不同的详情页,都要运用这个组件来烘托,那么科技创业在界http协议说路由规矩,装备时,就能够运用动态途径参数;来完成,如下所示
import VueRouter from "vue-router"
import New from "../components/NewCom.vue";
import About from "../components/AboutCom.vue";
import Detail from "../components/DetaiCom.vue";
// 创立router示例目标
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的称号
// path: 'detail', // 非动态路由设置
// 动态途径参数,以冒号开头:参数名
path: 'detail/:id/:name', // 运用占位符声明接纳的params参数
component: Detail
}
]
},
{
path: '/about',
component: About
}
]
})
export default router;
那在组件中怎么传递参数呢,如下所示
<router-link :to="`/new/detail/${item.id}/${item.name}`">{{item.name}}</router-link>
或如下目标的写法
<router-link :to="
{
name: 'detailPage',
params: {
id: item.id,
name: item.name
}
}
">{{item.name}}</router-link>
两种写法:概括一下
<!--跳转并带着params参数,to的字符串写法-->
<router-link :to="/new/detail/1/IT资源网">新闻</router-link>
<router-link :to="{name: 'detailPage',params: {id:1,name:'IT资源网'}}">
特别注意:
路由带着params
参数时,若运用to
的目标写法,则不能运用path
装备项,有必要运用name
装备
另一边组件怎么接纳的?**经过this.$route.params
**能够进行接纳
query与params的区别
-
params
传参,有必要运用命名路由方法传参
<router-link :to="
{
path: '/new/detail', // 如果是params,动态路由方法,这种方法是不收效的
params: {
id: item.id,
name: item.name
}
}
">{{item.name}}</router-link>
-
params
传参,不会显现在地止栏上,会保存在内存中,刷新会丢掉,能够合作本地存储localStohttps安全问题rage
进行运用 -
query
的参数会显现在地止栏上科技之锤,不会丢掉
路由的props装备
让路由组件更便利的收到参数
咱们知道在Vue
中子组件接纳父组件传递过来的数据,是用props
进行接纳,那么同样路由组件也是能够这么操作的
在字符常量接纳传递过来长生十万年的参数的组件,运用字符串是什么意思$route
会与路由紧密耦合,但是不是很灵敏,会写一堆的this.$route.params科技创业
或this.$route.query
这样的代码去读取传递过来的参数
路由装备的布尔方法
当 props
设置为 true
时,route.params
将被设置为组件的 props
它是在对应的路http://192.168.1.1登录由组件装备,设置props:true
,如下所示
// 省略
// 创立router示例目标
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的称号
// path: 'detail', // 非动态路由设置
path: 'detail/:id/:name', // 运用占位符声明接纳的params参数
component: Detail,
props: true // 此处设置props: true
}
]
},
{
path: '/about',
component: About
}
]
})
export default router;
那么在接纳运用参数的组件,经过props: ['参数1','参数2']
<template>
<div>
<!-- 直接在模板中能够运用 -->
<p>{{id}} {{name}}</p>
</div>
</template>
<script>
export default {
name: 'DetailCom',
props: ['id','name'], // 经过props进行接纳
mounted() {
console.log(this.$route);
}
}
</script>
路由装备的目标方法
咱们有时分,不仅仅是需求传入动态的参数,也需求传入静态的参数(写死的参数)传给路由组件,那么这个时分,props
目标方法就会很有用,如下所示
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的称号
path: 'detail/:id/:name', // 运用占位符声明接纳的params参数
component: Detail,
props: { // 目标方法,静态参数
url: 'https://itclan.cn'
}
}
]
},
]
})
在路由组件接纳运用参数,依科技之门旧运用props:['url']
进行接纳
注意的是:当props
为目标时,那么动态的参数,就失效了,只要静态参数才有用
所以接下来介绍的路由仓鼠饲养八大禁忌函数方法,就能够兼顾动态的路由参数与静态参数的结合
路由装备函数方法
props
值为函数,该函数回来的目标中每一组key-vaue
都会经过props
传给路由组件
这种方法很好的处理了路由组件传参中目标方HTTP法的坏处,科技图书馆能够兼顾静态参数与动态参数
如下所示
// 创立router示例目标
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的称号
path: 'detail/:id/:name', // 运用占位符声明接纳的params参数
component: Detail,
props(route) { // props值为函数方法,接纳一个参数route,并且回来一个目标
return {
id: route.params.id,
name: route.params.name,
url: 'https://itclan.cn'
}
}
// 等价如下两种写法
// 能够对参数进行解构
/*
props({params}) {
return {
id: params.id,
name: params.name,
url: 'https://itclan.cn'
}
}*/
// 目标的解构以及连续赋值,语义化不明确,不引荐
props({params: {id,name}}) {
return {
id,
name,
url: 'https://itclan.cn'
}
}
}
]
},
]
})
export default router;
让科技之门路由组件接纳参数时,能够更加的灵敏,不需求写许多重复this.$rohttpwatchute.query
或this.$route.params
这样的代码,这样的写法是最强壮的
总结
关于Vue
中的路由传参以及props
的装备就介绍到这儿,科技最狂潮其间传参有两种方法,一种是query
,另一种便是phttp 404arams
,前者经过url
后边跟着参数
,而经过this.$route科技之全球垄断.query
进https和http的区别行接纳参数,后者,是在路由规矩装备中的path
途径中,以冒号:
方法动态路由参数的装备,经过th科技图书馆i科技创业s.$route.params
方法进行接纳参数
两种方法各有特点
光看官方文档是理解不了的,这个有必要得自己动手写代码测验,才能知道这两种方法的区别,路由的传参是一个非常重要的知识点
而路由组件的props
装备则是更好的接纳参数,让接纳参数更加的灵敏