vue路由,路由传参(parmas,query),JavaScript的for循环与双重for循环

本文详细介绍了Vue.js中的路由操作,包括通过params和query进行参数传递,动态路由,编程式导航,路由模式(hash与history),路由嵌套以及登录路由配置。此外,还提到了如何实现登录状态的localstorage管理和路由守卫。
摘要由CSDN通过智能技术生成

1.获取路由的get传值

//路由配置

import BYHomeDetail from ‘…/BYHomeDetail.vue’

{path: ‘/homeDetail’, component:BYHomeDetail},

//跳转时跟get参数

  • { {listItem.title}}

    //子页面获取路由的get传值

    mounted(){

    console.log(this.$route.query);

    }

    2.动态路由传值

    //路由配置:带形参

    import BYNewDetail from ‘…/BYNewDetail.vue’

    {path: ‘/newDetail/:aid’, component: BYNewDetail},

    //跳转时传值

  • { {key}}–{ {item}}

    //子页面获取动态路由传值

    mounted(){

    console.log(this.$route.params);

    }

    四、路由的跳转方式:

    第一种跳转方式:编程式导航

    {path: ‘/news’, component: BYNews},

    this.$router.push({path:‘news’});

    带参:

    {path: ‘/newDetail/:aid’, component: BYNewDetail},

    this.$router.push({path:‘/newDetail/495’});

    第二种跳转方式:命名路由

    {path: ‘/news’, component: BYNews,name:‘news’},

    this.$router.push({name:‘news’});

    带参:

    this.$router.push({name:‘news’,params:{userId:123}});

    五、路由的hash模式以及history模式:

    默认是hash模式,路由上方的路径是用#表示,http://localhost:8080/#/news

    可以将hash模式改为history模式,路由上方的路径就没有了

    #,http://localhost:8080/news

    如果有history模式,需要后台做一些配置

    //Vue路由:实例化VueRouter

    con

  • 30
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值