import Login from '../views/login/login .vue'
// import 組件名 from '組件路徑'
import Register from '../views/register/register.vue'
import ChildrenVue from '../views/children/children.vue'
export default [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login ,
    name: 'login',
    meta: { //保存頁面信息
      title: 'this is Login ',
      description: 'this is Login description'
    },
    children: [ //子路由
      {
         path: '/children',
         component: ChildrenVue
      }
    ]
  },
  {
    path: '/register',
    component: Register,
    name: 'register'
  }
]

路由設(shè)置內(nèi)容

基本配置：

import Router from 'vue-router'?
import routes from './routes' //導(dǎo)入router 映射規(guī)則
const router = ?new Router({
? ?routes
})
export default router

若使用服務(wù)端渲染改寫為：

import Router from 'vue-router'?
import routes from './routes' //導(dǎo)入router 映射規(guī)則
//每次import都創(chuàng)建一個新的router 避免內(nèi)存溢出
export default () => {
? ?return new Router({
? ? ?routes,
? ? ?mode: 'history' //改為history模式方便服務(wù)端渲染做SEO
? ?})
}

入口文件配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import createRouter from './config/router' //導(dǎo)入router配置文件
Vue.use(VueRouter)
const router = createRouter()?
new Vue({
? router,
? render: (h) => h(App)
}).$mount('#root')

app.vue配置

在app.vue中加入：

<router-view></router-view>

給router-view添加切換動畫：

<transition name="fade">
? <router-view></router-view>
</transition>

css:

.fade-enter-active, .fade-leave-active {
? transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
? opacity: 0;
}

router中使用props

路由之前傳參可以使用this.$route拿到參數(shù)也可以使用props：

{
? ? path: '/login',
? ? props: (route) => ({id: route.query.id}),
? ? component: Login,
},

在login頁面的export default添加props:

export default {
? props: ['id'],
? mounted () {
? ? console.log(this.id) //打印傳遞的參數(shù)
? },
}

瀏覽器訪問得到結(jié)果：

在這里插入圖片描述

其他配置屬性

base:

export default () => {
  return new Router({
    routes,
    mode: 'history',
    base: '/base/'
  })
}

設(shè)置base之后瀏覽器訪問頁面路由path前面會自動加上base配置的值

在這里插入圖片描述

scrollBehavior :

//scrollBehavior 記錄頁面滾動的位置下次進來直接滾動到記錄的位置
export default () => {
  return new Router({
    routes,
    mode: 'history',
    scrollBehavior (to, from, savedPosition) {
       //savedPosition 記錄的位置 如果沒有返回最初位置
      if (savedPosition) {
        return savedPosition
      } else {
        return {x: 0, y: 0}
      }
    }
  })
}

導(dǎo)航守衛(wèi)

入口文件中配置全局導(dǎo)航守衛(wèi)：

import Vue from 'vue'
import VueRouter from 'vue-router'
import createRouter from './config/router' //導(dǎo)入router配置文件
Vue.use(VueRouter)
const router = createRouter() 
// 導(dǎo)航守衛(wèi)-start
router.beforeEach((to, from, next) => {
  console.log('before each invoked')
  next()
})
router.beforeResolve((to, from, next) => {
  console.log('before resolve invoked')
  next()
})
router.afterEach((to, from) => {
  console.log('after each invoked')
})
// 導(dǎo)航守衛(wèi)-end
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#root')

組件內(nèi)部導(dǎo)航守衛(wèi)配置：

const footer = {
  template: `<div>footer</div>`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實例 `this`
    // 因為當守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該組件被復(fù)用時調(diào)用
    // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
    // 由于會渲染同樣的 Foo 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。
    // 可以訪問組件實例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
    // 可以訪問組件實例 `this`
  }
}

每個路由獨享的導(dǎo)航守衛(wèi)配置：

{
    path: '/login',
    component: Login,
    beforeEnter: (to, from, next) => {
      //...
    },
    beforeResolve: (to, from, next) => {
      //...
    },
    afterEach: (to, from, next) => {
      //...
    }
},

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: