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

按照之前的设计我们路由的文件夹是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. shell 跟踪命令

    添加跟踪 set -x 去除跟踪 set +x

  2. python2和python3中int整型数据的不同之处

    python2中的除法,结果为整型数字(int型),例如 10/5=2,10/3=3,小数位向下取整 python3中的除法,结果为浮点型数字(float型)结果小数位最多保留16位小数

  3. git拉取远程所有分支

    第一步: git branch -r | grep -v '->' | while read remote; do git branch --track "${remote#origi ...

  4. cordova-plugin-alipay-v2使用篇(更新至20170725)(亲测可用)

    cordova-plugin-alipay-v2使用篇(更新至20170725)(亲测可用) alipaySdk已更新至20170725版本 支付宝WS_APP_PAY_SDK_BASE_2.0 &l ...

  5. codeforces 1198E Rectangle Painting 2 最小点覆盖

    题目传送门 题意: 有一个$n∗n$的网格,网格中有一些矩形是黑的,其他点都是白的. 你每次可以花费$ min (h,w)$的代价把一个$h*w$的矩形区域变白.求把所有黑格变白的最小代价. 思路: ...

  6. javascript与jquery删除元素节点

    今天工作的时候遇到一个删除的问题,研究了下发现是没有很好的区分js和jquery的删除方法,在此澄清一下 工作的代码如下 // 删除图片 $("#js_takePhotoWrap" ...

  7. google cloud

    1.win10下安装gcloud SDK 必须设置环境变量CLOUDSDK_PYTHON指向执行文件而不是目录.

  8. php自动生成不重复的id

    PHP uniqid()函数可用于生成不重复的唯一标识符,该函数基于微秒级当前时间戳.在高并发或者间隔时长极短(如循环代码)的情况下,会出现大量重复数据.即使使用了第二个参数,也会重复,最好的方案是结 ...

  9. C中的lvalue和rvalue

    该贴子第一条回答虽然浅尝辄止,但还是很有参考价值. https://www.quora.com/What-is-lvalue-and-rvalue-in-C IBM一个简单的说法是: "-通 ...

  10. loadrunner自定义函数

    https://zhangfy068.iteye.com/blog/1614794 Loadruner 有四种实现自定义函数的方式,根据脚本编写方便性进行选择不同的方式. (1)直接引用法: Acti ...