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

實例展示：

登錄界面：

主頁面：

此時的路徑：