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 10 Javascript
javascript 写类方式之六
Jul 05 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
Vue实现随机验证码功能
Dec 29 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
Javascript中的数学函数
2007/04/04 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
python flask中静态文件的管理方法
2018/03/20 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Python中捕获键盘的方式详解
2019/03/28 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
大学校园活动策划书
2014/02/04 职场文书
教师个人自我鉴定
2014/02/08 职场文书
党建示范点实施方案
2014/03/12 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
初中生物教学反思
2016/02/20 职场文书
分析Python list操作为什么会错误
2021/11/17 Python