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>