一、用name傳遞參數
1.在路由文件src/router/index.js裏配置name屬性。
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
2.模板裏(src/App.vue)用$route.name的形勢接收，比如直接在模板中顯示：
<p>{{ $route.name}}</p>
二.通過<router-link> 標籤中的to傳參
也許你也會覺的上邊的傳參很不正規，也不方便，其實我們多數傳參是不用name進行傳參的，我們用<router-link>標籤中的to屬性進行傳參，需要您注意的是這裏的to要進行一個綁定，寫成:to。先來看一下這種傳參方法的基本語法：
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
- name：就是我們在路由配置文件中起的name值。
- params：就是我們要傳的參數，它也是對象形勢，在對象裏可以傳遞多個值。
1.我們改造一下我們的src/App.vue裏的<router-link>標籤
<router-link :to="{name:'xxx',params:{username:'haohaoxuexi'}}">詳情頁</router-link>
2.把src/reouter/index.js文件裏給details配置的路由起個name,叫xxx.
{
path: '/details',
name: 'xxx',
component: details
}
3.最後在模板裏(src/components/details.vue)用$route.params.username進行接收.
<p>{{$route.params.username}}</p>
三.利用url傳遞參數
1.修改App.vue的<router-link>標籤（類似函數的實參傳遞）
<router-link to="/params/198/js is very good">我的</router-link>
2.修改index.js文件裏的配置（類似函數的形參接收）
{
path: '/params/:newsId/:newsTitle',
name: 'mine',
component: mine
}
3.最後在模板裏(src/components/mine.vue)進行接收.
<p>{{ $route.params.newsId}}</p>
<p>{{ $route.params.newsTitle}}</p>