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

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

实例展示：

登录界面：

主页面：

此时的路径：