vue-router 利用url傳遞參數

vue-router 利用url傳遞參數　

　:冒號的形式傳遞參數

　 在路由配置文件里以:冒號的形式傳遞參數，這就是對參數的綁定。

1. 在配置文件里以冒號的形式設置參數。我們在/src/router/index.js文件里配置路由。

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

我們需要傳遞參數是新聞ID（newsId）和新聞標題（newsTitle）.所以我們在路由配置文件里制定了這兩個值。

 

2. 在src/components目錄下建立我們params.vue組件，也可以說是頁面。我們在頁面里輸出了url傳遞的的新聞ID和新聞標題。

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>新聞ID：{{ $route.params.newsId}}</p>
        <p>新聞標題：{{ $route.params.newsTitle}}</p>
    </div>
</template>
 
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>