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个页面内...
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页面
更多推荐
所有评论(0)