跳到主要内容

20、页面间的参数传递

在普通的web开发中，参数传递有以下几种形式：

1、 url:/another_page?id=3；
2、 表单:<form>...</form>；

而在Vuejs中，不会产生表单的提交（这会引起页面的整体刷新）.　所以有两种：

1、 url．　同传统语言．参数体现在url中；
2、 vuejs内部的机制．（无法在url中体现，可以认为是由js代码隐式实现的）；

我们用一个实际的例子说明．

我们之前实现了　＂博客列表页＂，接下来我们要实现：点击博客列表页中的某一行，就显示博客详情页．

1. 回顾：现有的接口

我已经做好了一个接口： 文章详情页。 地址为：

/interface/blogs/show

该接口接收一个参数： id. 使用 http GET请求来访问。

下面是该接口的一个完整形式：

http://siwei.me/interface/blogs/show?id=1244

下面是返回结果:

{ 
    "result":{ 
        "body":"<p>这个问题很常见，解决办法就是禁止硬件加速...</p>", 
        "id":1244, 
        "title":"android - 在 view pager中的 webview, 切换时，会闪烁的问题。"这个问题很常见，解决办法就是禁止硬件加速...</p> 
    } 
}

在浏览器中看起来如下图所示：

 

2. 显示博客详情页

我们需要新增Vue页面： src/components/Blog.vue, 用于显示博客详情．

<template> 
  <div > 
    <div> 
      <p> 标题： {{ blog.title }}  </p> 
      <p> 发布于： {{blog.created_at }}</p> 
      <div> 
       {{ blog.body }} 
      </div> 
    </div> 
  </div> 
</template> 

<script> 
export default { 
  data () { 
    return { 
      blog: {} 
    } 
  }, 
  mounted() { 
    this.$http.get('api/interface/blogs/show?id='+this.$route.query.id).then((response) => { 
       this.blog = response.body.result 
    }, (response) => { 
       console.error(response) 
    }); 
  } 
} 
</script> 

<style> 
</style>

上面代码中:

 *  data(){ blog: {}} 用来初始化 blog这个页面用到的变量.
 *  {{blog.body}}, {{blog.title}} 等, 用来显示blog相关的信息.
 *  mounted... 中,定义了发起http的请求.
 *  this.$route.query.id 获取url 中的id参数. 例如: /my_url?id=333 , 那么 ‘333’ 就是取到的结果. 具体的定义看下面的路由。

3. 新增路由

修改： src/router/index.js文件. 添加如下代码：

import Blog from '@/components/Blog' 

export default new Router({ 
  routes: [ 
        // ... 
    { 
      path: '/blog', 
      name: 'Blog', 
      component: Blog 
    } 
  ] 
} )

上面的代码，就是让Vuejs 可以对形如 http://localhost:8080/#/blog 的url进行处理。 对应的vue文件是 @/components/Blog.vue.

4. 修改博客列表页—跳转方式1: 使用事件

我们需要修改博客列表页, 增加跳转事件:

修改：src/components/BlogList.vue, 如下代码所示：

<template> 
  ... 
      <tr v-for="blog in blogs"> 
        <td @click='show_blog(blog.id)'>{{blog.title }}</td> 
      </tr> 
  ... 
</template> 
<script> 
export default { 
  methods: { 
    show_blog: function(blog_id) { 
      this.$router.push({name: 'Blog', query: {id: blog_id}}) 
    } 
  } 
} 
</script>

在上面代码中

  • <td @click='show_blog(blog.id)'...</td> 表示: 该<td>标签在被点击的时候,会触发一个事件: show_blog,并且以当前正在遍历的 blog对象的id 作为参数

  • methods: {} 是比较核心的方法, vue页面中用到的事件,都要写在这里.

  • show_blog: function... 就是我们定义的方法.该方法可以通过@click="show_blog"来调用.

  • this.$router.push({name: 'Blog', params: {id: blog_id}})中:

  • this.$router 是vue的内置对象. 表示路由.

  • this.$router.push 表示让vue跳转. 跳转到 name: Blog 对应的vue页面. 参数是 id: blog_id .

演示

(TODO 这里的GIF要换成静态图片)打开“博客列表页” ，就可以看到对应的所有文章。然后点击其中一个的标题，就可以打开对应的文章详情页了。

如下图GIF动画所示：

 

不经过HTML转义,直接打印结果.

我们发现，HTML的源代码在页面显示的时候被转义了，如下:

 

所以，我们把它修改一下,不要转义:

<template> 
   ..... 
      <div v-html='blog.body'> 
      </div> 
   ..... 
</template>

上面的v-html 就表示不转义.

效果如下图:

 

修改博客列表页—跳转方式2: 使用v-Link##

<router-link> 比起 <a href="..."> 会好一些，理由如下：

无论是HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。

在HTML5 history 模式下，router-Link会拦截点击事件，让浏览器不再重新加载页面。

当你在HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了。

<td> 
  <router-Link:to="{name: 'Blog', query: {id: blog.id}}"> 
    {{blog.id}} 
  </router-link> 
</td>

然后,就可以看到,生成的HTML形如:

<a href="#/blog?id=1239" class=""> 
    1239 
</a>

点击之后,有同样的跳转功能.

感兴趣的同学，可以查看: https://router.vuejs.org/zh-cn/api/router-link.html

版权声明：「DDKK.COM 弟弟快看，程序员编程资料站」本站文章，版权归原作者所有