vue中vue-router的使用說明(包括在ssr中的使用)

2022-05-25 14:01:12

安裝vue-router

命令列執行：

npm i vue-router -S

建立組態檔

在專案src資料夾下建立config資料夾存放路由設定

在config資料夾下新建router.js和routes.js

router.js: 存放路由設定
routes.js: 存放理由對映規則

路由對映規則設定

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

路由設定內容

基本設定：

import Router from 'vue-router' 
import routes from './routes' //匯入router 對映規則
const router =  new Router({
   routes
})
export default router

若使用伺服器端渲染改寫為：

import Router from 'vue-router' 
import routes from './routes' //匯入router 對映規則
//每次import都建立一個新的router 避免記憶體溢位
export default () => {
   return new Router({
     routes,
     mode: 'history' //改為history模式方便伺服器端渲染做SEO
   })
}

入口檔案設定

import Vue from 'vue'
import VueRouter from 'vue-router'
import createRouter from './config/router' //匯入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拿到引數也可以使用props：

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

在login頁面的export default新增props:

export default {
  props: ['id'],
  mounted () {
    console.log(this.id) //列印傳遞的引數
  },
}

瀏覽器存取得到結果：

其他設定屬性

base:

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

設定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}
      }
    }
  })
}

導航守衛

入口檔案中設定全域性導航守衛：

import Vue from 'vue'
import VueRouter from 'vue-router'
import createRouter from './config/router' //匯入router組態檔
Vue.use(VueRouter)
const router = createRouter() 
// 導航守衛-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')
})
// 導航守衛-end
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#root')

元件內部導航守衛設定：

const footer = {
  template: `<div>footer</div>`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前呼叫
    // 不！能！獲取元件範例 `this`
    // 因為當守衛執行前，元件範例還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該元件被複用時呼叫
    // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 元件，因此元件範例會被複用。而這個勾點就會在這個情況下被呼叫。
    // 可以存取元件範例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時呼叫
    // 可以存取元件範例 `this`
  }
}

每個路由獨享的導航守衛設定：

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。