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

更新時(shí)間：2022年05月25日 11:19:19 作者：可能是魚

這篇文章主要介紹了vue中vue-router的使用說明(包括在ssr中的使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

安裝vue-router

命令行執(zhí)行：

npm i vue-router -S

創(chuàng)建配置文件

在項(xiàng)目src文件夾下創(chuàng)建config文件夾存放路由配置

在config文件夾下新建router.js和routes.js

router.js: 存放路由設(shè)置
routes.js: 存放理由映射規(guī)則

路由映射規(guī)則配置

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)建一個(gè)新的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添加切換動(dòng)畫：

<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前面會(huì)自動(dòng)加上base配置的值

在這里插入圖片描述

scrollBehavior :

//scrollBehavior 記錄頁面滾動(dòng)的位置下次進(jìn)來直接滾動(dòng)到記錄的位置
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) {
    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒被創(chuàng)建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來說，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 可以訪問組件實(shí)例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪問組件實(shí)例 `this`
  }
}

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

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

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

您可能感興趣的文章: