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

在学习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默认路径的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue2路由vue-router配置（懒加载）

    vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &

  • vue2.0 路由不显示router-view的解决方法

    今天学习vue2.0 的 router-view , 爆出的错误不计其数,不知道哪位大神写的router-view,配置的参数竟然不是router,而是routes =_=|| 这是花了一上午整出来的main.js,还有网上的同道们的提醒: import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App'; import goods from './components/goods/goods';

  • vue实现同一个页面可以有多个router-view的方法

    使用Vue+Element搭建项目的时候,为了避免一个页面过大,将tab里面的内容分成多个页面,并使用同级视图展示 <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户详情" name="first"> <router-view></router-view> </el-t

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

    在学习vue的时候,遇到很多问题,这里做一些总结,持续更新. 今天说一个问题,就是在学习vue的时候,从之前的1.0版本升级到2.x的时候,遇到的问题.一个简单的设置默认路由. 在vue的官方文档中,并没有对这个做出案例和解释,不知道是不是我没发现.反正这个问题算是遇到的小小的坑吧.原谅一个菜鸟,什么都不懂. 在察阅文章的过程中,发现有前辈总结了这个方面的知识. 具体实现如下: import Vue from 'vue' import Router from 'vue-router' impor

  • js动态设置select下拉菜单的默认选中项实例

    利用javascript设置select下拉菜单的选中项. 代码实例如下: <!--js动态设置select下拉菜单的默认选中项--> <html> <head> <title>下拉菜单</title> <script type="text/javascript"> window.onload=function(){ var osel=document.getElementById("selID"

  • vue动态设置img的src路径实例

    相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接当做字符串了,当然网上也有很多方法,这里使用的是最有效的方法. 看代码: 使用导入资源的方式 <template> <div @click="home"> <img :src="home_url" alt="..." style="height: 10vw"

  • Git Bash终端默认路径的设置查看修改及拓展图文详解

    Git Bash终端默认路径的设置查看修改及拓展图文详解

    目录 1.Git Bash默认路径 2.如何查看Git Bash终端默认路径 3.如何修改Git Bash终端的默认路径 4.拓展:指定目录进入Git Bash终端 5.注意事项 1.Git Bash默认路径 在windows系统上操作Git的客户端是Git Bash. 安装完Git Bash之后,双击打开,如下图: 使用pwd命令查看当前路径: 每次打开Git Bash都进入默认的目录中. win7系统就是Git安装目录的根目录. win10系统在系统盘的用户目录中,例如:C:\Users\L

  • vue router 组件的高级应用实例代码

    1 动态设置页面标题 页面标题是由 <title></title> 来控制的,因为 SPA 只有一个 HTML,所以当切换到不同的页面时,标题是不会发生变化的.必须通过 JavaScript 来修改 <title></title> 中的内容: window.document.title ='xxx' 有一种思路是在每个页面的 *.vue 的 mounted 钩子函数中,通过 JavaScript 来修改 <title></title>

  • mysql修改数据库默认路径无法启动问题的解决

    前言 mysql 修改数据库默认路径时出现服务无法启动,检查日志发现报文件权限的错误. 对于更改后的目录已经设置mysql为目录的owner啦呀!且命令行下直接启动数据库就一切正常. 祭出万能的Google ,最后在一篇老外的帖子中找到了原因--SELINUX 策略问题! 凡是后台服务都需要有对相应目录的对应权限,而 mysql 的默认路径/var/lib/mysql 已经添加了相应的策略,修改路径后由于没有相应的策略,导致后台进程读取文件被selinux阻止,从而出现权限错误! 方法如下: m

  • ASP.NET Core MVC 修改视图的默认路径及其实现原理解析

    ASP.NET Core MVC 修改视图的默认路径及其实现原理解析

    本章将和大家分享如何在ASP.NET Core MVC中修改视图的默认路径,以及它的实现原理. 导语:在日常工作过程中你可能会遇到这样的一种需求,就是在访问同一个页面时PC端和移动端显示的内容和风格是不一样(类似两个不一样的主题),但是它们的后端代码又是差不多的,此时我们就希望能够使用同一套后端代码,然后由系统自动去判断到底是PC端访问还是移动端访问,如果是移动端访问就优先匹配移动端的视图,在没有匹配到的情况下才去匹配PC端的视图. 下面我们就来看下这个功能要如何实现,Demo的目录结构如下所示

  • SQL Server 2005/2008 用户数据库文件默认路径和默认备份路径修改方法

    以下仅为参照,如果有多个实例,可能会有些许不同: 本环境是SQL Server 2005 Standard Version 64-bit 和 SQL Server 2008 Standard Version 64-bit 双实例同时安装在一个 Windows Server 2008 Standard Version 64-bit OS上: 代码 复制代码 代码如下: Windows Server 2008 Standard Version 64-bit SQL Server 2005 Stand

  • VUE2.0+Element-UI+Echarts封装的组件实例

    本文用Vue2.0+elementUI的panel组件和table组件+echarts的柱状图和折线图实现对结果的展示,实现了表格和图之间的切换和图和表之间的转置. -html <div class="resultDiv"> <div id="panels"> <el-collapse> <el-collapse-item v-for="item in indicators"> <templa

  • vue router 用户登陆功能的实例代码

    有些路由页面需要用户登陆之后才能访问如(用户中心),如果用户没有登陆就访问这些页面的话就应该转换到登陆页面,登陆成功之后在进入该页面. 需要用到的知识点有:H5中的会话存储(sessionStorage).vue-router路由前置操作.路由元信息(meta). 路由配置 在路由页面中添加auth字段信息用于验证当前路由页面是否需要登陆. const router = new Router({ mode: 'history', base: process.env.BASE_URL, route

随机推荐