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 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
angular十大常见问题
Mar 07 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
微信小程序实现录音功能
Nov 22 Javascript
React forwardRef的使用方法及注意点
Jun 13 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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
JavaScript 变量作用域分析
2011/07/04 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
python通过yield实现数组全排列的方法
2015/03/18 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
python中的句柄操作的方法示例
2019/06/20 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
环境科学毕业生自荐信
2013/11/21 职场文书
毕业生自荐信
2013/12/14 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
对孩子的寄语
2014/04/09 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
使用Python拟合函数曲线
2022/04/14 Python