[5]vue-router 利用url传递参数

资料来源于技术胖的个人网站

在实际开发也是有很多用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-view>标签。这时候我们可以直接利用url传值了。

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

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

我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。

加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。

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