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 相关文章推荐
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
实现两个文本框同时输入的实例
Sep 25 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 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作为Shell脚本语言使用
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
python实现每次处理一个字符的三种方法
2014/10/09 Python
多版本Python共存的配置方法
2017/05/22 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
python实现ip代理池功能示例
2019/07/05 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
中专自我鉴定范文
2013/10/16 职场文书
大学活动总结格式
2014/04/29 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
Python编写nmap扫描工具
2021/07/21 Python