关于vue.js: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},