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的LigerUI如何实现文件上传
Jul 09 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
javascript几个易错点记录
Nov 26 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
node中koa中间件机制详解
Aug 22 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 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+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
python求解水仙花数的方法
2015/05/11 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
简述python&pytorch 随机种子的实现
2020/10/07 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
办理生育手续介绍信
2014/01/14 职场文书
前处理组长岗位职责
2014/03/01 职场文书
家长通知书家长意见
2014/12/30 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
初一数学教学反思
2016/02/17 职场文书
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle