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 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
浅析node.js的模块加载机制
May 25 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
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
十天学会php(1)
2006/10/09 PHP
php4的session功能评述(三)
2006/10/09 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
基于php实现的验证码小程序
2016/12/13 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
JS跨域总结
2012/08/30 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
vuejs指令详解
2017/02/07 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
python3抓取中文网页的方法
2015/07/28 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
Python shutil模块用法实例分析
2019/10/02 Python
python线程优先级队列知识点总结
2021/02/28 Python
英国标准协会商店:BSI Shop
2019/02/25 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
高中美术教学反思
2014/01/19 职场文书
大班幼儿评语大全
2014/04/30 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
学习型党组织心得体会
2014/09/12 职场文书
英文慰问信
2015/02/14 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
违纪开除通知书
2015/04/25 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
新年祝酒词大全
2015/08/11 职场文书
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android