//首頁路由， 及其匯總
export default {
    path:"/home",    //路由的路徑，會顯示在地址欄
    name:"home",     //路由的名稱，后期項目做起來直接拿名稱比較方便
    meta:{           //路由元信息
        title:'首頁',    //拿取當前路由的title
        //這里邊還可設置其他的狀態(tài)，比如登錄的標志，路由是否緩存的標志
    },
    component: () => import ("@/views/Home"),    //路由映射的頁面
}

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from "./home.js";
import show from "./show.js";
Vue.use(VueRouter)
const routes = [
  {path:"/", redirect:"home"},       //啟動項目重定向到home頁面
  home, show,            //分路由進入后在這里注冊一下
]
const router = new VueRouter({
  mode: 'history',         //分為hash和history模式，默認是history，history帶#號，hash模式需要后臺進行配置
  routes
})
export default router

<template>
  <div id="app">
    <router-link v-for="i in nav" :key="i.title" :to='i.path'>{{i.title}}</router-link>
    <router-view />
  </div>
</template>
<script>
export default {
  data(){
    return {
      nav:[
        {title:'首頁', path:'/home'},
        {title:'展示頁', path:'/show'},
      ]
    }
  }
}
</script>

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from "./home.js";
import show from "./show.js";
Vue.use(VueRouter)
const routes = [
 {path:"/", redirect:"home"},       //啟動項目重定向到home頁面
 home, show,            //分路由進入后在這里注冊一下
]
const router = new VueRouter({
  mode: 'history',         //分為hash和history模式，默認是history，history帶#號，hash模式需要后臺進行配置
  routes,
})
router.afterEach((to, from) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
})
export default router

redirect: to => {
   if('id標識'){
        return "路由路徑"
    }else if('id標識'){
        return "路由路徑"
    }
}