重定向

场景一

比如登录后所显示的页面一般是主页部分,这个主页则是我们重定向的页面

直接上代码:

// router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import("../components/Home")
const Login = () => import("../components/Login")
const Welcome = () => import("../components/Welcome")

Vue.use(VueRouter)

const routes = [
  {
    // 重定向
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home,
  }
]

const router = new VueRouter({
  routes
})

export default router

场景二

进入主页面后,显示的内容可以是首页商品内容或者是文章列表,又或者是电影列表,这些在vue中皆可以是当前主页组件的子组件,我们希望在进入到主页面时,显示的自动显示其中一个子组件。

// router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import("../components/Home")
const Login = () => import("../components/Login")
const Welcome = () => import("../components/Welcome")

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children:[
      {
        path: '/welcome',
        component: Welcome
      }
    ]
  }

]

const router = new VueRouter({
  routes
})

export default router

实例展示:

登录界面:

在这里插入图片描述

主页面:

在这里插入图片描述
此时的路径:

在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐