014 路由传递参数

页面跳转过程中，是可以携带参数的，这也是很常见的业务

新建项目：vue create vue-router-demo

选上第四个

 自动生成

 新建NewsView.vue

 

 

 先在路由当中把新创建的这个页面配置进去

 接下来在首页设置打开这个页面的按钮“新闻”

 

 

新建新闻详情的页面NewsDetailsView.vue

 

 

在路由里在配置一下

 

 

 

例如：在一个列表项，点击进入查看每个列表项的详情

第一步：在路由配置中指定参数的key

{

　　path:"/list/:name",

　　name:"list",

　　component:()=>import("../views/ListView.vue")

}

第二部：在跳转过程中携带参数

<li><router-link to="/list/内蒙">内蒙旅游十大景区</router-link></li>

<li><router-link to="/list/北京">北京旅游十大景区</router-link></li>

<li><router-link to="/list/四川">四川旅游十大景区</router-link></li>

第三步：在详情页面读取路由携带的参数

<p>{{$route.params.name}}城市旅游景区详情</p>