vue中如何将main.js中数据传给html

路由传值 路由对象如下图所示: 在跳转页面的时候,在js代码中的 *** 作如下,在标签中使用标签this.$router.push({ name: 'routePage', query/params: { routeParams: params } }) 需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题。 这样使用起来很方便,但url会变得很长,而且如果不是使用路由跳转的界面无法使用。

2.

通过$parent,$chlidren等方法调取用层级关系的组件内的数据和方法 通过下面的方法调用:this.$parent.$data.id //获取父元素data中的id

1、直接跳转 

     <router-link to="/detail/one">link跳转  </router-link>

 2、携带参数跳转

    <router-link :to="{path:'/detail/two', query:{id:1，name:'vue'}}">link跳转  </router-link>

3、打开新窗口跳转

     <router-link :to="{path:'/detail/three', query:{id:1，name:'vue'}}" target="_blank">link跳转</router-link>

获取参数：

     id = this.$route.query.id

1、path query  跳转：

     this.$router.push({path: "/detail", query: {id: e}})

     获取参数：

     id = this.$route.query.id

2、name params 跳转：

     this.$router.push({name: "/detail", params: {id: e}})

     获取参数：

     id = this.$route.params.id

跳转：

       const new = this.$router.resolve({name: '/detail', params: {id: e}})

        或

       const new = this.$router.resolve({path: '/detail', query: {id: e}})

       window.open(new.href,'_blank')

获取参数：

      id = this.$route.params.id

      或

      id = this.$route.query.id

比如说A页面的运行地址是 http://localhost:8080/A.html#/        A是列表页

            B页面的运行地址是http://localhost:8080/B.html#/152    B是从列表页进入的详情页

如果在A页面里面写@click=$router.push({path:'/B'+item.aa})

不管是这样写还是@click=$router.push({path:'./B'+item.aa})

出来的效果都是 http://localhost:8080/A.html#/B.html#/152 

而想要的效果不需要A.html#/的

最后多次实验查找网上资料，发现需要

用a链接在外层包裹一下，然后写href

:href = ". '/B.html#/' + item.aa "

这样就可以直接多个页面之前的跳转了