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 28 Javascript
js 编写规范
Mar 03 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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
TMDPHP 模板引擎使用教程
2012/03/13 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
进步之星获奖感言
2014/02/22 职场文书
公司保密承诺书
2014/03/27 职场文书
测绘工程专业求职信
2014/07/15 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
承诺保证书格式
2015/02/28 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
2016寒假假期总结
2015/10/10 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
python通过函数名调用函数的几种方法总结
2021/06/07 Python
python代码实现备忘录案例讲解
2021/07/26 Python