Vue 里的十万个为什么

前言

正如标题所说的，本文主要是分享一些关于 Vue 中的为为什么，但标题中的十万个有点夸张了，不过这也不重要，重要的是本文会持续更新，把 Vue 中的一些容易产生疑问的知识点收录进来。

vue-cli 创建的项目为什么会有两个 id=”app”？

index.html是html文件的模板，将来启动项目后要把动态生成的模板都会放在id为app这个div中。
在App.vue中也有一个id为app的div，这并不冲突，可以看下main.js中启动vue的那段代码：

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

这段代码是启动整个Vue应用的，其中用到了一项配置是template，之后template对用的模板会替换掉模板index.html中id为app的那个div，如果想要在最终渲染的模板中保留id为app的div，那就需要在App.vue中写一个，你可以查看启动后的项目，模板中是有一个id为app的div。

@/components/Home 和 ./components/Home 有什么区别？

@/ 代表 src 目录，./ 代表当前目录

根实例参数含义？

new Vue({
   el:"#app",
   router,
   template:'<App />',
   components:{
     App
  }
})

1、<App /> 是什么意思？

同 <App></App>，<App /> 只是前者的缩写

2、router 是什么意思？

本来写法是这样的 router:router 但是 ES6 为我们提供了一种新语法，key 值和 vlue 值相同的时候，我们可以简写比如上面的 router

< a href=”#/home”>,#是什么意思？

哈希模式切换页面，哈希不会跳转页面，而是在当前页面中载入页面

怎么去掉 url 中的 # 号？

一般地，比如通过 vue-cli 搭建项目，可以通过http://localhost:8080 来访问，但 Vue 会自动给我们在后面多加了一个 # ，如果想去掉也好简单，在路由配置中修改下 mode 属性的值就可以了，默认是 hash 模式，我们改成 history 就可以。但是这样的话页面就变成了跳转，而不是在当前页面中载入了。不过我们可以使用 vue-router 为我们提供的一个组件来解决这个问题。

<router-link to="/home"></router-link>

this.$router.push() 无效

当我们像下面这样写时会有问题的，根本就没有匹配到路由。

this.$router.push({ path: "/postDetail", params: { id: id } });

此时我们就应该注意了，如果你们是通过query 传参的可以用上面这种写未能，但我们如果是通过 params 传参的，那么我们就得把 path 属性改成 name 并且填上对象的组件名。

this.$router.push({ name: "PostDetail", params: { id: id } });

这个组件名是我们在定义路由的时候定义的：

......
{
    path: '/postDetail/:id',
    name: 'PostDetail',
    component: PostDetail
  },
......

这个是很常容易遇到的坑。

持续列新……，敬请留意！