靠谱前端培训|上海web前端培训机构-百读易莱胜官网 靠谱前端培训.png

靠谱前端培训.png
【上海校区】 专攻小班JS前端培训
当前位置:  主页 > web前端文章 > 前端其他文章 >

Vue路由2_传递和读取路由器参数

2018-04-04/08:04:55

有时,您可能需要从Vue应用的网址抓取数据。我们将名为name的URL参数传递给about页面。 打开/src/router.js  并修改以下内容:

{
      path: '/about/:name',  // Add /:name here
      name: 'about',
      component: About   
      
}

接下来,访问/src/components/About.vue  文件并修改模板部分以显示 我们将很快定义的their_name属性:

<h1>Hello {{ their_name }}, this is an about page</h1>

然后, 在模板部分下添加一个

<script>export default {
  name: 'About',
  data() {
    return {
      their_name: this.$route.params.name    }
  }}
</script>

您可以使用this。$ route.params.name_of_router_param  属性来访问我们在/src/router.js  文件中指定的路由器参数名称。 保存该项目并访问/ about / AnyNameHere  ,您将看到该值显示在模板中!

7-3-1518462961820.png


+相关文章推荐+