vue 一个简单的项目 之零 step 3

单文件组件与vue路由

单文件组件：以.vue 结尾的文件。

里面放的就是vue 的组件。单文件组件包含三块内容：<template>, <script>, <style>. 如下。

    

vue 路由

路由的功能就是根据网址的不同，返回不同的内容给用户.即根据url 的不同，返回给用户不一样的页面。

上图，<router-view/> 是有内容的，它显示的是当前路由地址所对应的内容。

当前路由地址所对应的内容又是什么呢？

    

上面显示的内容了。打开入口文件 main.js

    

引入了router，并在根实例中，使用了router，ES6语法，属性名与值相同，可以只写属性名，第12行。

而router 就是项目中，路由配置部分的内容。

当写./router 时，vue 会去找该文件夹，并自动引入该文件夹下，index.js 。该文件内容如下。

     

可见，这个文件导出的内容为路由的配置项。路由里的配置：当访问根路径时，根路径的路由（将展示的是）对应的是HelloWorld（component中），而HelloWorld 是从第三行引入的。其中“@” 表示src 目录。

找到components 下的 HelloWorld 如下。它也是一个单文件组件。

    

理解了上述内容。我们就可以更改了。删掉components 文件夹，在src 下建立一个pages 文件夹 里面再建立一个home 文件夹 再往里面放一个Home.vue 单文件组件，里面放我们想要展示的页面。删掉路由配置页面关于Helloworld 的内容。

如下。

这样子，当在地址栏 使用 http://localhost:8080/#/ 与 http://localhost:8080/#//list  时则显示不同的网页啦。