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代码,用以防止图片撑破页面
Mar 12 Javascript
JS的反射问题
Apr 07 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
ES6关于Promise的用法详解
May 07 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
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 查找字符串常用函数介绍
2012/06/07 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
从零学Python之hello world
2014/05/21 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Python的互斥锁与信号量详解
2019/09/12 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
如何验证python安装成功
2020/07/06 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
索尼巴西商店:Sony巴西
2019/06/21 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
信息管理专业推荐信
2013/10/29 职场文书
车队司机自我鉴定
2014/03/02 职场文书
给全校老师的建议书
2014/03/13 职场文书
大学活动总结范文
2014/04/29 职场文书
挂靠协议书
2015/01/27 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang