路由——动态路由

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就能获取到对象{id,type}

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 2022-03-07 12:55  In-6026  阅读(57)  评论(0)    收藏  举报

导航