一:利用url传递参数(以 :冒号形式的形式传递参数)
具体用法:
1、在src/router/index.js路由配置文件里,以:冒号的形式配置参数:(这里需要传递的参数是 新闻ID(newsID)和新闻标题(newsTitle)):
2、在src/components目录下建立params.vue组件(页面),在页面里,输出新闻ID(newsID)和新闻标题(newsTitle):
3、最后在App.vue文件夹里写入<router-link>标签,方便直接利用url传值:
二:通过name传递参数(在开发中比较少用)
具体用法:
1、在路由文件src/router/index.js中配置name属性:
2、在模板(src/App.vue)里用$route.name的形式接收name值,直接在模板显示:
三:通过<router-link>标签中的to传值(推荐用to传值,开发中用得最多)
注意:这里的to要进行绑定,要写成:to
name:时路由文件中配置的name值
params:是要传递的参数,可以传递多个值(username:代表key值,'jspang'代表value值)
具体用法:
1、在src/router/index.js文件中给hi1配置的路由起个name,叫做hi1:
2、在App.vue文件中用<router-link>标签进行传参:
3、最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收:
效果图如下所示: