vue
您的位置: 主页 > web前端文章 > 前端其他文章 >

Vue路由2_传递和读取路由器参数【访问量:141】

有时,您可能需要从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


2018-04-04
匿名评论