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 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
用js编写留言板
Mar 17 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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开发框架的对比
2013/07/05 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
php删除数组元素示例分享
2014/02/17 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
css3发光搜索表单分享
2014/04/11 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
党员年终民主评议的自我评价
2013/11/05 职场文书
毕业生自荐信
2013/12/14 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
老人祝寿主持词
2014/03/28 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL