6-5.Vue-router之利用URL传递参数

Vue-router

Vue中利用url传递参数

在进行路由页面跳转时如果遇到需要传递参数的情况，可以通过配置src/router/index.js路由文件实现跳转路由时传递参数的功能。
在实际的开发中，当我们实现新闻的浏览功能时需要根据每个新闻标题打开不同的新闻内容，这时就需要传递新闻编号和标题。可以利用vue-router中url传递参数的方式解决这一问题。
传递参数需要在路由文件index.js进行配置，以:参数名的形式进行配置，用冒号绑定参数。假设我们需要传递新闻id和新闻title这两个参数
1.在src/router/index.js文件里面，在path字段后加上·：参数名

{
   
	path:'/params/:newsId/:newsTitle',
	component:Params
}

• 这里传递新闻编号(newsId)和新闻标题(newsTitle)这两个参数。

2.在src/components/目录下新建params.vue组件，在这个页面将传递过来的参数值在网页中进行输出。

<template>
	<div>
		<h1>
			{
   {
    msg }}
		</h1>
		<p>传递过来的新闻id:{
   {
    $route.params.new