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 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
node中koa中间件机制详解
Aug 22 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 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
PHP define函数的使用说明
2008/08/27 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
Python数据类型学习笔记
2016/01/13 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python 占位符的使用方法详解
2019/07/10 Python
通过实例解析Python return运行原理
2020/03/04 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
高中政治教学反思
2014/01/18 职场文书
岗位聘任书范文
2014/03/29 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
Python实现批量自动整理文件
2022/03/16 Python