在做登录页面之前,我们必须得完成路由的设定。。。

按照之前的设计我们路由的文件夹是src/router

官方默认的index.js,如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/view/components/HelloWord'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

你可以吧这个index.js改成

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

routes:[

  {

    path:'/',

    componet:rsolve=>require(['@components/HelloWord'],resolve),

  }

]

效果是一样的,都是加载HelloWord的文件,作为'/'的访问页面。

配置完成后我们访问 http://localhost:port的时候 在域名后面会有一个锚点#,如下http://localhost:8080/#/

那是因为vue默认的router模式是Hash模式,我们需要手动改为history模式。

去掉#的方法 我们可以加上 mode: 'history',

Router进阶一:https://www.cnblogs.com/jeckyhuang/p/11441951.html

未完待续...

Vue之自建管理后台(三)登录页面的更多相关文章

  1. Vue之自建管理后台(一)准备工作

    完成最基础的Vue环境及新建一个vue项目. 一般来说,我们拿到一个项目需求或者得到一个需求的时候,第一件应该做的事情不是立马坐在电脑前面去写代码,如果你这么做的,好吧...我只能暂时认定你为一个刚上 ...

  2. Vue之自建管理后台(二)Vue端设计

    我们先设计Vue的文件夹分布. 在此之前,我们先了解下初始化创建的Vue的文件夹 https://www.cnblogs.com/luoxuemei/p/9812151.html (我引用了这哥们写的 ...

  3. React后台管理系统-登录页面

    登录页面 <div className="col-md-4 col-md-offset-4">                <div className=&qu ...

  4. 使用vue和drf后台进行登录页面和注册页面(本文大概的疏通一下前后台是怎么交互的)

    注册页面 先从vue页面开始,下面是举例的vue页面截图 从上面的截图我们可以看到一些vue的指令:v-model和v-on(缩写成@) v-model是表单指令:就是获取属性值,在这里就是这些输入框 ...

  5. SpringBoot学习笔记四之后台登录页面的实现

    注:图片如果损坏,点击文章链接: https://www.toutiao.com/i6803542216150090252/ 继续之前完成的内容,首先创建一个常量类 常量类的内容 服务器端渲染 前后端 ...

  6. Vue管理系统前端系列三登录页和首页及`vuex`管理登录状态

    目录 登录页面设计 vuex 对应 用户模块 丰富界面 首页相关代码 登录页面设计 该节记录了登录界面的设计,以及 vuex 的简单实用,然后将首页简单搭建完成. 先看最终效果图 先在 views 文 ...

  7. vue+elementui搭建后台管理界面(1登录)

    1 node环境安装 从 node官网下载安装包 2 vue-cli npm install vue-cli -g 3 新建项目 vue init webpack vue-project 可保持默认, ...

  8. Vue实战狗尾草博客后台管理系统第三章

    Vue实现狗尾草博客后台管理系统第三章 本章节,咱们开发管理系统侧边栏及面包屑功能. 先上一张效果图 样式呢,作者前端初审,关于设计上毫无美感可言,大家可根据自己情况设计更好看的哦~ 侧边栏 这里我们 ...

  9. 使用vue+elementUI+springboot创建基础后台增删改查的管理页面--(1)

    目前这家公司前端用的是vue框架,由于在之前的公司很少涉及到前端内容,对其的了解也只是会使用js和jquery,所以..慢慢来吧. 在此之前需要先了解vue的大致语法和规则,可先前往官方文档进行学习h ...

随机推荐

  1. 第一记 搭建Java集成开发环境

    一.JDK JDK可以前往oracle官网进行下载并进行安装(我这边使用的是jdk1.8版本,也推荐使用jdk1.8及以上的) 下图是默认路径安装完成后的截图 安装完成会产生这两个文件夹 二.配置环境 ...

  2. Process Array

    http://xiaorui.cc/2016/05/10/%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90multiprocessing%E7%9A%84value-array ...

  3. 将 XML 架构(XSD)附加到Word文档

    附加到文档中的 XML 架构是为您的组织进行自定义而设计的.XML 架构通常由 IT 专业人员创建,他们的职责就是在 Word 中为您的组织构建专用的模板或解决方案. 可用于附加到文档的架构在架构库中 ...

  4. Jmeter请求非Json格式的参数如何添加

    Step1: 可以先在用户自定义变量中加入你需要添加的请求类型,具体参考图片 Step2: 在线程组下请求之前添加HTTP信息头管理器

  5. 让Nginx路径中的子目录匹配文件夹的另一种写法

    其实相当于对路径做一种通配符,根据路径名访问相应的文件夹.直接看高潮部分如下.. location /static { root /var/www/usmt; index index.html boa ...

  6. 认识和学习BASH alias 给长命令起别名 unalias 取消该别名

    此图反映了shell所在的位置与作用. 既然Shell与KDE和application等都是用户与Kernel的接口,那为什么还要学习呢?书中也给出了答案. 通用性,可以这样理解,也就是所谓的跨平台机 ...

  7. 删除DataFrame中特定条件的行/列

    在<Python进行数据分析与挖掘实战>一书中,第10章 删除热水器不工作的数据(水流量为0并且开关机状态为“关”的数据.) import pandas as pd data=pd.rea ...

  8. Oracle系列教程之一软件安装与卸载

    1.安装软件 软件下载地址:https://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/index.html ...

  9. Java——抽象:abstract

    3.4抽象:abstract 3.4.1什么是抽象类? 随着继承层次中一个个新子类的定义,类变得越来越具体,而父类则更一般,更通用.类的设计应该保证父类和子类能够共享特征.有时将一个父类设计得非常抽象 ...

  10. jdk环境配置-windows 10

    近期由于云服务器到期,重新买了一个云服务器,这里顺便把jdk环境配置步骤做一个记录 1.下载自己需要的jdk 我这里是下的免安装版的  2.计算机(此电脑)->属性->高级系统设置-> ...