路由销毁上⼀页_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"};scr Home.vue代码：
网页代码中的单标签
<template>  <div class="page">    <img alt="Vue logo" src="../assets/logo.png" />    <h2>Home Pageh2>  div>template><script>export default {  name: "Home"};sc 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>在浏览器中重新访问下⾯⼏个不同的路径，路由器会根据路径路由到相应的页⾯。
配置路由
打开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 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 我们再重新打开⼀下404页⾯

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。