vue2 设置router-view默认路径的实例


Posted in Javascript onSeptember 20, 2018

在学习vue的时候,遇到很多问题,这里做一些总结,持续更新。

今天说一个问题,就是在学习vue的时候,从之前的1.0版本升级到2.x的时候,遇到的问题。一个简单的设置默认路由。

在vue的官方文档中,并没有对这个做出案例和解释,不知道是不是我没发现。反正这个问题算是遇到的小小的坑吧。原谅一个菜鸟,什么都不懂。

在察阅文章的过程中,发现有前辈总结了这个方面的知识。

具体实现如下:

import Vue from 'vue' 
import Router from 'vue-router' 
import goods from '../components/goods/goods' 
import ratings from '../components/ratings/ratings' 
import seller from '../components/seller/seller' 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
  {path: '/', redirect: 'goods'}, 
  {path: '/goods', component: goods}, 
  {path: '/ratings', component: ratings}, 
  {path: '/seller', component: seller} 
 ] 
})

其实要说的话,文档也是有这方面的说明的,就是重定向。redirect将进入时的路径,重新定位到goods上,一进来就可以打开goods页面,其实也是这个道理。

以上这篇vue2 设置router-view默认路径的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery之empty()与remove()区别说明
Sep 10 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 #Javascript
vuejs router history 配置到iis的方法
Sep 20 #Javascript
关于单文件组件.vue的使用
Sep 20 #Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 #Javascript
jQuery pjax 应用简单示例
Sep 20 #jQuery
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 #Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 #Javascript
You might like
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
javascript闭包入门示例
2014/04/30 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
vue登录注册实例详解
2019/09/14 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Python正则表达式介绍
2012/08/06 Python
介绍Python中几个常用的类方法
2015/04/08 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Django跨域请求原理及实现代码
2020/11/14 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
市场营销专科应届生求职信
2013/11/24 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
起诉书范文
2015/05/20 职场文书
高一英语教学反思
2016/03/03 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫