Vue路由传参三种方案

方案一 路由后面跟参数

特点：

1 参数在地址栏中显示。
2 刷新页面，参数不会消失。

案例：

代码示例：

------------------------------router.js------------------------------------------
const routes = [
  {
    path: '/news/:newsId', // 路由后面跟上自定义参数变量
    name: 'News',
    component: () => import( '../views/news.vue')
  }
]
------------------------------跳转链接--------------------------------------------

<router-link to="/news/a1b2c3d4e5">新闻</router-link>  // 路由后面直接跟上参数
或者
// 特别注意：这种方式跳转将导致新闻组件生命钩子不会触发。可通过其他方法解决此问题。，此处只是说明路由传参的用法
<button @click="jumpToNews('1a2b3c4d')">跳转到新闻页</button>
jumpToNews(param){ 
   this.$router.push({ path:`/news/${param}`})
}
----------------------------新闻组件获取路由参数--------------------------------------
mounted(){ 
   this.newsId = this.$route.params.newsId  // 通过$route.params获取指定参数（变量）
},

方案二 $router.push({ path:' ', query:{ id:''} })

特点：

1 参数在地址栏中显示。
2 刷新页面，参数不会消失。

案例：

代码示例：

--------路由--------------------------------------
const routes = [ 
  {
    path: '/news', 
    name: 'News', 
    component: () => import( '../views/news.vue')
  }
]
--------跳转方法-----------------------------------

 jumpToNews(param){
   this.$router.push({ path:`/news`, query:{newsId:param}})
 }
 
 --------新闻组件获取路由参数-----------------------
 mounted(){ 
   this.newsId = this.$route.query.newsId  
},

方案三 匹配路由中name属性，并通过params传参

特点：

1 参数不会在地址栏中显示。
2 刷新页面，参数消失。

案例：

代码示例：

 --------路由--------------------------------------
const routes = [ 
  {
    path: '/news', 
    name: 'News', 
    component: () => import( '../views/news.vue')
  }
]
 --------跳转方法-----------------------------------
jumpToNews(param){
   this.$router.push({ name: 'News', params:{newsId:param}})
}
 --------新闻组件获取路由参数------------------------
 mounted(){ 
    this.newsId = this.$route.params.newsId 
},