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

按照之前的设计我们路由的文件夹是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. export的用法

    定义环境变量并且赋值 # export MYENV= //定义环境变量并赋值 # export -p declare -x HOME=“/root“ declare -x LANG=“zh_CN.UT ...

  2. 37-python基础-python3-字典的常用方法-keys()-values()-items()

    有 3 个字典方法,它们将返回类似列表的值,分别对应于字典的键.值和键-值对:keys().values()和 items(). 这些方法返回的值不是真正的列表,它们不能被修改,没有append()方 ...

  3. goland 实用键

    代码补全 option + command + v

  4. 一、hibernate环境搭建

    hibernate环境搭建 下载hibernate hibernate的jar 连接数据库的jar 解压hibernate,解压后目录结构 documentation :对应hibernate开发文档 ...

  5. layout(布局)组件

    一.依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 二.class加载方式    <div id="box" class="easyui- ...

  6. Android消息处理:EventBus、BroadCast和Handler-优缺点比较

    上一篇研究了EventBus的使用方法,但随之而来的一系列问题也是值得思考,EventBus到底给项目带来了什么?它与Android原有的消息处理机制有什么区别和优缺点?项目在什么场景下采用Event ...

  7. windows10自带的画图软件打出来的字是斜的,怎么解决?

    因为字体中带@的字体,方向就是斜的,所以打字时不要用前面带@符号的字体. 用其他字体方向为正常的

  8. C++子类的构造函数后面加:冒号的作用(转)

    在C++类的构造函数中经常会看到如下格式的写法: MyWindow::MyWindow(QWidget* parent , Qt::WindowFlags flag) : QMainWindow(pa ...

  9. CSIC_716_20191209【并发编程---GIL和协程】

    GIL   Global Interpreter Lock 全局解释锁 GIL对含IO的任务来说,会出现不能保证数据安全的情况.如下: from threading import Thread fro ...

  10. asp.net MVC遇到的问题

    参考:http://blog.csdn.net/chenqiangdage/article/details/48996101 asp.netMVC 如何解决“上下文模型已在数据库创建后发生更改” 问题 ...