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代码：

<template>
  <div class="page">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h1>Login Page</h1>
  </div>
</template>
​
<script>
export default {
  name: "Login"
};
</script>

Home.vue代码：

<template>
  <div class="page">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h2>Home Page</h2>
  </div>
</template>
​
<script>
export default {
  name: "Home"
};
</script>

404.vue代码：

<template>
  <div class="page">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h1>404 Page</h1>
  </div>
</template>
​
<script>
export default {
  name: "404"
};
</script>

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

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 sass-loader@7.3.1 --save-dev

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

<style lang="scss">
​
</style>

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

<template>
  <div class="site-wrapper site-page--not-found">
    <div class="site-content__wrapper">
      <div class="site-content">
        <h2 class="not-found-title">404</h2>
        <p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦...</p>
        <el-button @click="$router.go(-1)">返回上一页</el-button>
        <el-button
          type="primary"
          class="not-found-btn-gohome"
          @click="$router.push('/')"
          >
进入首页
</el-button
        >
      </div>
    </div>
  </div>
</template>
​
<script>
export default {
  name: "404"
};
</script>
<style lang="scss">
.site-wrapper.site-page--not-found {
  position: absolute;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  .site-content__wrapper {
    padding: 0;
    margin: 0;
    background-color: #fff;
  }
  .site-content {
    position: fixed;
    top: 15%;
    left: 50%;
    z-index: 2;
    padding: 30px;
    text-align: center;
    transform: translate(-50%, 0);
  }
  .not-found-title {
    margin: 20px 0 15px;
    font-size: 8em;
    font-weight: 500;
    color: rgb(55, 71, 79);
  }
  .not-found-desc {
    margin: 0 0 30px;
    font-size: 26px;
    text-transform: uppercase;
    color: rgb(118, 131, 143);
    > em {
      font-style: normal;
      color: #ee8145;
    }
  }
  .not-found-btn-gohome {
    margin-left: 30px;
  }
}
</style>
​

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

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