vue-router参数传递

      先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你想在所看的页面位置（类似于面包屑导航）

一.用name传递参数

两步完成用name传值并显示在模板里：

①在路由文件src/router/index.js里配置name属性。

routes: [
{
  path: '/',
  name: 'Hello',
  component: Hello
}
]

②模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示：

<p>{{ $route.name}}</p>

二、用html标签中的to传参

to要进行一个绑定，写成:to

①传递。

    改造一下我们的src/App.vue里的标签,我们把hi1页面的进行修改

    <router-link :to="{name: 'hi1', params: {userName: 'dukun'}}">hi1页面</router-link> |

②接收。

src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1

{ path: 'hi1', name: 'hi1', component: Hi1 },

在模板里(src/components/Hi1.vue)用$route.params.username进行接收

<h1>{{$route.params.userName}}</h1>

三、用url传参

Ⅰ：冒号的形式传递参数 === 对参数的绑定

①在/src/router/index.js文件里配置路由

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

②在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

<p>新闻ID：{{ $route.params.newsId}}</p>
<p>新闻标题：{{ $route.params.newsTitle}}</p>

③在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了

<router-link to="/params/888/very good">params</router-link> |

Ⅱ.正则表达式在URL传值中的应用

path:'/params/:newsId(\\d+)/:newsTitle'