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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
原生js实现弹出层效果
Jan 20 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
vue计算属性及使用详解
Apr 02 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
浅谈JavaScript中this的指向更改
Jul 28 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程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
塔吉特百货公司官网:Target
2017/04/27 全球购物
《愚公移山》教学反思
2014/02/20 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
安徽导游词
2015/02/12 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸