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 相关文章推荐
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
javascript事件冒泡实例分析
May 13 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
js实现聊天对话框
Feb 08 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
用PHP读取RSS feed的代码
2008/08/01 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python框架中flask知识点总结
2018/08/17 Python
用Python实现数据的透视表的方法
2018/11/16 Python
python实现合并两个排序的链表
2019/03/03 Python
pandas中的series数据类型详解
2019/07/06 Python
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
企业法人授权委托书
2014/04/03 职场文书
政风行风整改方案
2014/10/25 职场文书
就业证明函
2015/06/17 职场文书
我爱我班主题班会
2015/08/13 职场文书
周一问候语大全
2015/11/10 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle