码迷,mamicode.com
首页 > Web开发 > 详细

vue-router 利用url传递参数

时间:2018-06-18 21:45:20      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:png   out   设置   图片   vue   技术分享   back   page   配置   

1.在/src/router/index.js文件里配置路由

技术分享图片

2.编写Params.vue 

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>ID:{{ $route.params.Id}}</p>   //输出Url 传递的Id
        <p>标题:{{ $route.params.Title}}</p>  //输出 Url 传递的 Title   //对应的是这里   path:‘/params/:Id/:Title‘,
    </div>
</template>
 
<script>
export default {
  name: ‘params‘,
  data () {
    return {
      msg: ‘params page‘
    }
  }
}
</script>

  3. 在App.vue 设置 <router-view>标签,显示出来页面

技术分享图片

 

 效果:

技术分享图片

  2018-06-18    20:37:43

 

vue-router 利用url传递参数

标签:png   out   设置   图片   vue   技术分享   back   page   配置   

原文地址:https://www.cnblogs.com/guangzhou11/p/9196043.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!