共计 1512 个字符，预计需要花费 4 分钟才能阅读完成。
计划一 路由前面跟参数
特点：
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},正文完