vue设置默认首页的操作


Posted in Javascript onAugust 12, 2020

在router.js设置如下:

index就是默认页面

const routes = [
// 公司项目
{ path: '/', redirect: '/index' },
{path:'/index',component:index},
{
path:'/example',
component:example,
redirect:'/edetail',
children:[
{path:'/edetail',component:edetail}
]
},
{path:'/login',component:login}
]

不使用在根目录设置router的方法,跳转页面带不同的头部信息时容易出现问题

补充知识:vue-router默认的首页渲染设置

当一个vue项目的页面打开,总得有一个默认的首页组件自动出现

不能只是点击首页的跳转才出现

这个默认的打开路由配置需要在router.js中的 VueRouter 实例中,改变routes数组

const router = new VueRouter({
 routes:[
 {
 path:'/',
 //redirect 是重新定向
 redirect:'/home'
 },
 {
 path:'/home',
 component:Home
 }
]
})

这样设置之后,就将默认的路由路径设置为/home

以上这篇vue设置默认首页的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
JavaScript 的继承
Oct 01 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 #Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 #Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 #Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 #Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 #Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 #Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 #Javascript
You might like
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
PHP代码优化技巧小结
2015/09/29 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
实例解析Array和String方法
2016/12/14 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python ubplot使用方法解析
2020/01/10 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
优秀中专生推荐信
2013/11/17 职场文书
小学教师师德反思
2014/02/03 职场文书
员工入职担保书范文
2014/04/01 职场文书
酒店员工培训方案
2014/06/02 职场文书
品质标语大全
2014/06/21 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
班组拓展活动方案
2014/08/14 职场文书
刑事代理授权委托书
2014/09/17 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
老人节主持词
2015/07/04 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
给numpy.array增加维度的超简单方法
2021/06/02 Python