Vue问题区

传参

传参
this.$route.push({path:'/xxx',query:{id:1}});//类似get传参，通过URL传递参数
this.$route.push({path:'/xxx',params:{id:1}});//类似post传参
接参
this.$route.query.id
this.$route.params.id

sessionStorage.setItem('navs', JSON.stringify(data.navs));    
 this.navs = JSON.parse(sessionStorage.getItem('navs'));   

去除路径“#”

使用vue-cli搭建的环境，在配置好路由之后，可以看到下面的情况：

localhost:8080/#/commodity

对于vue开发的单页面应用，vue-router 默认hash模式，使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。

因为对于正常的页面来说，更换url一定是会导致页面的更换的， 而只有更换url中的查询字符串和hash值得时候才不会重新加载页面。 这里也就是这个道理。

但是#这种形式真的很丑！  所以，如果不想要，可以使用路由的history模式！！！ 这种模式充分利用了history.pushState API来完成URL的跳转而不需要重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

 render函数

render函数是渲染一个视图，然后提供给el挂载，如果没有render那页面什么都不会出来

 new Vue({
 
   router,
   store,
   //components: { App }  vue1.0的写法
   render: h => h(App)    vue2.0的写法
 }).$mount('#app')

vue.2.0的渲染过程：

1.首先需要了解这是 es 6 的语法，表示 Vue 实例选项对象的 render 方法作为一个函数，接受传入的参数 h 函数，返回 h(App) 的函数调用结果。

2.其次，Vue 在创建 Vue 实例时，通过调用 render 方法来渲染实例的 DOM 树。

3.最后，Vue 在调用 render 方法时，会传入一个 createElement 函数作为参数，也就是这里的 h 的实参是 createElement 函数，然后 createElement 会以 APP 为参数进行调用，关于 createElement 函数的参数说明参见：Element-Arguments

结合一下官方文档的代码便可以很清晰的了解Vue2.0 render:h => h(App)的渲染过程。

[官方文档][1]：

 render: function (createElement) {
     return createElement(
       'h' + this.level,   // tag name 标签名称
       this.$slots.default // 子组件中的阵列
     )
 }

表单提交出现"?"现象

表单提交阻止下冒泡或默认事件就可以了

第一种     直接在form上设置为 onsubmit="return false" 就能阻止表单提交了
第二种     <button class="InforBotton" @click.prevent="LoginButton()">登录</button>

 vue项目如何刷新当前页面

第一步：修改app.vue
            <template>  
                <div id="app">
                    <router-view  v-if="isRouterAlive"></router-view> 
                </div>
            </template>
            export default {
                name: 'app',
                provide(){
                    return{
                        reload:this.reload
                    }
                },
                data(){
                    return{
                        isRouterAlive: true,
                    } 
                },
                methods:{
                    reload () {
                         this.isRouterAlive = false
                         this.$nextTick(() => (this.isRouterAlive = true))
                       } 
                }
            }
    第二步：在需要刷新的页面中注入reload依赖，然后直接用this.reload来调用就行
            export default {
                inject:['reload'],  //跳转注入依赖
            }
            直接使用this.reload();

Vue大括号字符换行

<p v-html="name"></p>

data() {
     return{
          name: '前一部分<br/>后一部分'
     }
}