vue单文件路由引入html,单文件组件与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配置项，就可以显示出我要的这个效果了，即输入不同的网址，会显示出不同的内容。