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
},
......
这个是很常容易遇到的坑。
持续列新……,敬请留意!
-
微信扫一扫,赏我
-
支付宝扫一扫,赏我