路由——动态路由

js跳转

navigator(id) {
  //路由参数
  this.$router.push(`/news/${id}`)    //是router不是route,router是用于跳转等**行为**的,route适用于查看路由**信息**的
  //get传值
  this.$router.push(`/news?id=${id}`)
}

标签跳转

方式一:路径参数

路由
{ path: '/news/:id', component: News }  //在后面加 :id

html
<ul>
  <li v-for="id in news"> 
    <router-link to="/news/${id}">

跳转到id所代表的新闻内容页后,通过:
this.$route.params 获取到当前路由参数id(即新闻id);形如http://localhost:3000/new/12315;12315就是id
对于多参数:
/news/:id/newsType/:type  通过this.$route.params就能获取到对象{idtype}

get传值

html
<ul>
  <li v-for="{id, index} in news"> 
    <router-link to="/news?id=${id}">  单个参数
    <router-link to="/news?id=${id}&index=${index}">  多参数用&连接

通过this.$route.query获取

posted on   In-6026  阅读(51)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示