vue基础（三）-页面路由

​Vue.js路由允许我们通过不同的URL访问不同的内容。
通过Vue.js可以实现多视图的单页Web应用（single page web application,SPA）。
Vue.js路由需要载入vue-router库。

添加页面

我们打开前面创建好的项目，并把components改为views,并在views目录下添加3个页面：Login.vue、Home.vue、404.vue。3个页面内容简单相似，只有简单的页面标识，如登录页面是“Login Page”。
Login.vue代码：

​

Home.vue代码：

​

404.vue代码：

​

在浏览器中重新访问下面几个不同的路径，路由器会根据路径路由到相应的页面。

http://localhost:8080/#/，/路由到Home Page

http://localhost:8080/#/login，/login路由到Login Page

http://localhost:8080/#/404，/404路由到404 Page

SCSS

SCSS是一种CSS预处理语言，定一了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS（SACC）和LESS、POSTCSS.
在这里我们使用SCSS编写页面样式，所以先安装好SCSS。

npm install [email protected] --save-dev

在页面代码中把style标签中的lang设置成scss即可

丰富一下404页面内容，加入scss样式，改造后的代码如下

​


​

我们再重新打开一下404页面

扫码关注，获取最新的信息