vue-router 利用url传递参数

:冒号的形式传递参数
在路由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。 在配置文件里以冒号的形式设置参数。在/src/router/index.js文件里配置路由。

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

需要传递参数是新闻ID（newsId）和新闻标题（newsTitle），在路由配置文件里制定了这两个值。

在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>

在App.vue文件里加入<router-link>标签。此时直接利用url传值了。

<router-link to="/params/198/jspang website is very good">params</router-link> |

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

在传递时有基本的类型判断，加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。

path:'/params/:newsId(\\d+)/:newsTitle',//此时newsId只能是数字