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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
详解JS数组方法
Nov 20 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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php 操作符与控制结构
2012/03/07 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
python实现月食效果实例代码
2019/06/18 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
python爬虫用mongodb的理由
2020/07/28 Python
什么是Python包的循环导入
2020/09/08 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
索尼ICF-36收音机评测
2022/04/30 无线电