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 相关文章推荐
JavaScript触发器详解
Mar 10 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
对Django url的几种使用方式详解
2019/08/06 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
业务员薪酬管理制度
2014/01/15 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
美术学专业求职信
2014/07/23 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
2015年父亲节寄语
2015/03/23 职场文书
高中历史教学反思
2016/02/19 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
MySQL一些常用高级SQL语句
2021/07/03 MySQL
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript