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

按照之前的设计我们路由的文件夹是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. display的inline-block替代float的一些场景

    一.横向菜单 inline-block是不换行的块级元素,对于使用ul-li结构的网页顶部横向导航菜单非常有用. 如果不使用inline-block属性,只能使用float来浮动每个li元素,写起来比 ...

  2. Zookeeper-技术专区-运作流程分析介绍

    Zookeeper的启动流程 Zookeeper的主类是QuorumPeerMain,启动时读取zoo.cfg配置文件,如果没有配置server列表,则单机模式启动,否则按集群模式启动,这里只分析集群 ...

  3. go 区分指针

    先看一段代码 先放一段代码,人工运行一下,看看自己能做对几题? package main import "fmt" func main() { var a int = 1 var ...

  4. Lock中使用Condition实现等待通知

    Condition类有很好的灵活性,可以实现多路通知功能,一个Lock对象中可以创建多个Condition对象实例,线程对象可以注册在指定的Condition中,进而有选择的进行线程通知,在调度线程上 ...

  5. Alpha版本后的心得体会

    Alpha版本后的心得体会 在我们一系列的努力之下,我们团队打造的校园互助式快递代取APP——U-Help的α版本终于能够问世了.尽管这个版本存在着这样那样的问题,但是我们还是对此抱有充足的信心.另一 ...

  6. 【Javascript DOM读书笔记】chapter8 充实文档内容

    本章目的 作者举出了第一个实例,为一篇 web 页面动态创建缩略语(abbreviation)的列表.大家知道,我们可以使用 <abbr>...</abbr> 来指示一个缩略语 ...

  7. 前端学习(一)html标签(笔记)

    html->标签 标题标签:<h1>标题文字</h1>段落标签:<p>段落文字</p>换行标签:<br/>图片标签:<img s ...

  8. PHP-移除元素

    给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...

  9. linux,进行批量下载文件操作

     wget -i url.txt -P ./Photo 批量下载图片(一般是某个相册的图片) 首先先得到一张图片的地址如:www.example.com/pic/001.jpg 同相册的图片地址会有一 ...

  10. SQL优化(三)—— 索引、explain分析

    SQL优化(三)—— 索引.explain分析   一.什么是索引 索引是一种排好序的快速查找的数据结构,它帮助数据库高效的查询数据 在数据之外,数据库系统还维护着满足特定查找算法的数据结构,这些数据 ...