vue路由跳转页面不变_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 Pageh1>  div>template><script>export default {  name: "Login"};script>

Home.vue代码：

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

404.vue代码：

<template>  <div class="page">    <img alt="Vue logo" src="../assets/logo.png" />    <h1>404 Pageh1>  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

配置路由

打开router/index.js,添加三个路由，分别对应主页、登录和404页面。

import Vue from "vue";import VueRouter from "vue-router";import Home from "../views/Home.vue";import Login from "../views/Login.vue";import NotFound from "../views/404.vue";Vue.use(VueRouter);const routes = [  {    path: "/",    name: "Home",    component: Home  },  {    path: "/login",    name: "Login",    component: Login  },  {    path: "/404",    name: "notFound",    component: NotFound  }];const router = new VueRouter({  routes});export default router;

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">404h2>        <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页面