单文件组件与Vue中的路由

图片.png

上面截图是src目录中的main.js文件;

图片.png

上图是目录中的index.html文件。

打开src目录中的main.js,这是项目的入口文件,这其中 new Vue()是定义了一个根实例,其中el:'#app',可以知道这个根实例挂载到一个id=app的一个元素上,这时打开整个目录中的index.html文件,body标签中的id就是app,即main.js中的挂载点指的就是index.html 中的id=app的div元素。
main.js的根实例中,有一个components:{App},这是一种es6的写法(键值一样的话,只需要写一个就可以了),花括号内其实省略写了“:App”,不简写的形式是这样的:components:{App:App},后一个App意思是我在我的项目里用了一个局部组件,名字叫App,前一个App的意思是取名根实例的名字叫APP(即 var App = new Vue({})。
template模板中的意思是直接把App这个组件给渲染出来。
现在来看根实例是怎么把局部组件App给渲染出来的。先来看下局部组件App的位置。main.js文件的上面有import App from './App'代码,import后面的App指的就是局部组件App,from后面的App意思是是从当前这个目录(现指的就是src目录)中的App导入进来的,这个App中没有跟任何的后缀,但是webpack虽然看到没有后缀,但是它会帮助从一些后缀当中选择(比如App.vue,App.js等等会一个个找),例子中是有App.vue文件的。
打开这个App.vue文件,可以看到这个文件是由三部分组成:template、script和style
新增小知识:当文件以.vue结尾的时候,这个文件就叫做单文件组件,实际上里面放的就是vue组件。之前vue组件的写法是vue.component(),括号内添加组件的名字,模板逻辑等等。现在使用单文件组件的话,组件和以前定义就不一样了。现在的如下图:


图片.png

模板放在template标签中,逻辑放在script标签中,组件的CSS样式放在style标签中,
这个App.vue中的内容就是浏览器网页中所要显示的内容(打开运行-cmd,来到当前代码所在的位置,运行npm run dev,启动这个代码):style标签中显示的是CSS内容,即内容的样式。template标签中显示logo还有一个路由器标签。
现在着重了解路由器
路由就是:根据网址的不同,返回不同的内容给用户。
到页面上的表现就是:访问的是根路径的时候,返回的就是这个页面:


图片.png

路由的意思就是,如果我给别的网址,比如在现有的这个网址的后面添加东西,比如list,让其成为一个新的网址,那么页面显示的内容也将变成新的内容。
回到页面上,页面上的样式是来自于App中的style标签中的内容,logo来自template标签,那么页面中所剩下的文字来自哪里?
答案是来自router-view/标签。如果将这一标签删除,可以看到网页中是显示不出来文字的。
那么router-view标签显示的是什么呢?显示的是当前路由地址所对应的内容。
当前路由地址是网页中显示的网址,那么为什么这个网址就是对应的是显示的这个内容呢?
在main.js这个文件中,import引入了router路由,在根实例中引用了这个router路由,即“router,”。(这其中也是和刚才一样,用了es6简写,如果不简写的话是router:router。)
那么这个router文件在哪里?在当前目录下router这个文件夹下,然后vue会自动引入router这个文件夹下的文件,即index.js这个文件。

打开index.js文件,可以看到导出的文件是什么,即export中的内容,这个内容就是一组配置项:


图片.png

在路由里面做了这样的配置:
当访问根路径的时候(即path:'/',),根路径这个路由对应的内容是什么?是component:HelloWorld,helloworld在哪里,从上面的import中可以看到,helloworld在components上,@符的意思是在src这个目录。连起来的意思就是在src目录上找到了components这个文件夹,这个文件夹里面有一个文件是HelloWorld,打开后可以看到这个文件是HelloWorld.vue,这也是一个单文件组件。
现在的路由配置,可以这样翻译:
当访问根路径的时候,页面展示的是HelloWorld组件;因为在App.vue中router-view展示的是当前路由地址所对应的内容,也就是路由配置中component的HelloWorld。
所以我可以提供另一个路径,当访问另一个路径的时候,页面来显示另一个内容:
我们在src目录下添加list文件夹,list文件夹内添加文件list.vue,在这个文件内写入我想增加的内容:
图片.png

将这个文件的内容连接到路由文件夹router的index.js中,通过在index.js中添加import,然后在下面的export的routes中添加新的配置路径,这个配置就将路径/list和局部组件List联系到了一起:
图片.png

这样在页面上通过写不同的路径,就可以显示不同的网页内容了:
当输入localhost:8080的时候,显示的是这样的内容:
图片.png

当在网址末尾加入list的时候,网页显示的是另外的内容:
图片.png

这就是app.vue文件中的router-view标签的功能:当前路由地址所对应的内容。即输入不同的地址,可以显示不同的内容

我在实际操作的时候,碰到的一个插曲问题:
当我增加了一个路由配置的时候,所有的东西都处理好了,当我打开页面的时候,在网址中输入/list网址时,网页是无法显示对应的内容的。花了很长时间,发现我用的是上次关机前用的浏览器网页,这次我处理代码的时候我没有运行cmd命令提示符,没有在对应的文件夹输入npm run dev,以致没有使项目启动。当我改正后,这样启动项目的时候,又出现了新问题:无法启动。当我把所有新添加的list等等内容都删除后,留有最一开始的vue-cli代码,这样才可以启动项目,启动项目之后再添加新的list配置项,就可以显示出我要的这个效果了,即输入不同的网址,会显示出不同的内容。

你可能感兴趣的:(单文件组件与Vue中的路由)