vue + php 制作个人视频网站（二）- 登录页面

页面的创建及引入

首先，我们在 views 文件夹创建 Login.vue 及 Register.vue ，先填写模板：

<template>
	<div class="login-panel"></div>
</template>
<script></script>
<style scoped></style>

然后我们来到 router/index.js 将两个页面引入：

import Login from '../views/Login';			// 引入Login
import Register from '../views/Register';	// 引入Register

// 跳转同一页面多次报错;
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
   
  return originalPush.call(this, location).catch((err) => err);
};

const routes = [
    // 上略
    {
   
        path: '/login',
        name: '登录 -- Yukinoshita',
        component: Login
    },
    {
   
        path: '/Register',
        name: '注册 -- Yukinoshita',
        component: Register
    }
    // 下略
];

// 之后添加登录验证后还需修改此部分内容
router.beforeEach(function(to, from, next) {
   
    document.title = to.name;    // 跳转页面后标题将变为我们上面设定的name值
    next();
})

现在我们就可以正常访问我们刚刚自己创建的两个页面了，但是有问题的是，在页面中我们会看到顶部的导航条非常碍眼，我们可以来到 App.vue 将导航条部分注释掉

<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div> -->
    <router-view/>
  </div>
</template>

此时回到页面，就能发现碍事的导航条已经消失了，我们现在就可以进行两个页面的设置了。

页面的显示

• 添加全局 css

在 src/assets 文件夹内创建 css 文件夹，并新建 style.css 作为全局 css。

style.css

* {
   
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Courier New", Courier, monospace;
}
a {
   
    text-decoration: none;
    color