Vue Router解释

昨晚自己新建一个Vue Project打算模仿京东商城做一下网站,感觉自己学了几个月的Vue,胸有成竹,以为很简单,没想到现实就是那么残酷,连基本路由都配置不好。

不过经过昨晚,终于把一些以前不明白的东西弄懂了。

我一般都是用Vue的脚手架搭建的项目。

Src的目录下App.vue是主文件,入口文件。所有组件和路由都需要挂载进这个文件。

重点是这个

       

以前我搞不懂这个router-view是什么,和router有什么关系。
昨晚终于明白了。
原来是把所有路由放在router文件夹下面的index.js里面,然后这些路由或者页面,都会挂载进App.vue的文件里。


这道理很简单,但是新手没有人指导的话不容易想明白。

还有关于路径的,当想import组件的时候

  import my-component from 'components/my-component'

会报错,提示找不到这个组件。
这也是新手容易犯的错误。
两个解决办法
一: 改为相对路径

  import my-component from './components/my-component'

二:
在webpack.base.conf.js的文件里的resolve选项的alias对象设置

alias: {
    'components': resolve('src/components')
}

webpack就会把这个路径通过这个函数

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

把路径配置好。
不明白的请留言。

上星期,前端框架撕逼大战,作为一个新手,我也愤怒了,也怼了几句。不过静下来想想,之前我是因为水平不够暂时不学React,看来是时候学习React了。
React和Vue很多相似的地方,应该不难学,但是那语法比Vue更难写和更难懂。慢慢来。

本人承接前端外包项目和应聘前端工程师
广州地区
Github: github.com/hccdj131
有兴趣的请联系

你可能感兴趣的:(Vue Router解释)