实例入手vue-router重定向

场景

当一进来某一个APP，想让其显示某个页面，所以需要在index.vue使用重定向使其重定向到初始页面。

效果

前文

从实例入手学习Vue-router的使用-实现音乐导航菜单切换

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/84504573

知识储备

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({routes: [{ path: '/a', redirect: '/b' }]
})

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({routes: [{ path: '/a', redirect: { name: 'foo' }}]
})

甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({routes: [{ path: '/a', redirect: to => {// 方法接收 目标路由 作为参数// return 重定向的 字符串路径/路径对象}}]
})

实例

在router下的index.js中

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/index'
import Home from "@/pages/home"
import Artists from "@/pages/artists"
import ListCate from "@/pages/listcate"
import Ucenter from "@/pages/ucenter"
import Search from "@/pages/search"
Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Index',redirect:"/home",component: Index,children:[{path: 'home',component: Home},{path:"artists",component:Artists},{path:"listcate",component:ListCate},{path:"ucenter",component:Ucenter},{path:"search",component:Search}]}]
})

实例入手vue-router重定向相关推荐

Vue router 重定向 redirect 如何传值
配置 vue_router 时, 很经常就用到重定向(redirect)功能例如: 没登录重定向到登录页面(导航卫士拦截也是高效的登录检查方法) index, home, house 重定向到首页等 ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
Vue Router路由及路由重定向
Vue的核心深度集成,可以非常方便的用于SPA应用程序的开发. 实现路由功能七大步骤第一步:引入相关的库文件注意:必须先引用Vue,在引用vue-router 顺序不能颠倒 <!-- 导入 ...
python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
Vue Router路由嵌套
路由嵌套分析点击父级路由链接显示模板内容模板内容中又有子级路由链接点击子级路由链接显示子级模板内容默认显示点击 hello链接显示本身的组件外,还显示了自身下的子组件嵌套路由用法父路由 ...
vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析一.Vue.js实例在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
vue.js 重定向和 404 等等相关的问题？
vue.js 重定向和 404 等等相关的问题? 进入后就是默认 / 重定向 {path:'/',redirect:'home'} 重定向 {path:'/',redirect:{name:'hom ...
Vue Router的详细教程
Vue Router的详细教程安装 #直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 ...
Vue+Vue Router+Vuex页面演示
Vue+Vue Router+Vuex简单页面演示 1.目录结构(使用vue-cli创建) 2.编写代码 src/router/index.js import Vue from "vue&q ...

实例入手vue-router重定向

场景

效果

前文

知识储备

实例

实例入手vue-router重定向相关推荐

最新文章

热门文章