0
点赞
收藏
分享

微信扫一扫

实例入手vue-router重定向


场景

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

效果

实例入手vue-router重定向_Vue

前文

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


知识储备

重定向也是通过 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中

实例入手vue-router重定向_重定向_02

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
}
]
}

]
})

 

举报

相关推荐

0 条评论