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 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
Vue如何实现响应式系统
Jul 11 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图片验证码代码
2008/03/27 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
关于Python 3中print函数的换行详解
2017/08/08 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
python用700行代码实现http客户端
2021/01/14 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
项目经理岗位职责
2013/11/11 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
颐和园导游词400字
2015/01/30 职场文书