vue设置一开始进入的页面教程


Posted in Javascript onOctober 28, 2019

vue项目默认进入的页面是

HelloWorld.vue

现在我们创建一个页面Login.vue

<template>
  <div>
登录界面
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {}
    }
  }
</script>

在router目录下的index.js文件中我们设置一开始进入的页面

初始index.js文件:

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

现在我们让他一开始进入登录页面Login.vue;

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

运行后:

vue设置一开始进入的页面教程

以上这篇vue设置一开始进入的页面教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中的前绑定和后绑定详解
Aug 01 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
js实现tab切换效果实例
Sep 16 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
vue-axios使用详解
May 10 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
JavaScript实现简单计算器功能
Dec 19 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
Vue调用后端java接口的实例代码
Oct 28 #Javascript
原生js实现商品筛选功能
Oct 28 #Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 #Javascript
JavaScript制作3D旋转相册
Aug 02 #Javascript
微信小程序工具函数封装
Oct 28 #Javascript
js实现3D照片墙效果
Oct 28 #Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 #Javascript
You might like
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
python生成器用法实例详解
2019/11/22 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
乡镇庆八一活动方案
2014/02/02 职场文书
一句话工作感言
2014/03/01 职场文书
演讲比赛策划方案
2014/06/11 职场文书
医院合作协议书
2014/08/19 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
就业推荐表院系意见
2015/06/05 职场文书
解除合同协议书范本
2016/03/21 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript