【Vue】vue3.2配合vue-router4代码

vue3.2配合vue-router4代码

简单使用

npm导入

npm install vue-router@4

在src下创建router，再创建index.js

components下 创建两组件，home.vue和about.vue

---

index.js

import { createRouter,  createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/components/home.vue') // 建议进行路由懒加载，优化访问性能
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/components/about.vue')
  }
]

const router = createRouter({
  //history: createWebHistory(),    // 使用history模式
  history: createWebHashHistory(),	 // 使用hash模式
  routes
})

export default router

在main.js中引入并挂载

import { createApp } from 'vue'
import './style.css'
import router from './router/index.js'
import App from './App.vue'

createApp(App).use(router).mount('#app')

App.vue引入

	<div id="nav">
    	<router-link to="/">Home</router-link> |
    	<router-link to="/about">about</router-link>
	</div>
	<router-view />

---

在按钮中点击后触发路由有些许不同

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter() //注意不要写错
const to = (res) => {
  router.push(res) //这里是字符型，也可以换成router.push({path:'/'})
}
</script>

<template>
  <!-- <div id="nav">
    	<router-link to="/">Home</router-link> |
    	<router-link to="/about">about</router-link>
	</div> -->
  <div>
    <button @click="to('/')">home</button>
    <button @click="to('/about')">a</button>

    <router-view />
  </div>
</template>

<style scoped>

</style>

onBeforeRouteLeave

---

可以替代组件内守卫，新增的组合式Api，离开当前页面路由时触发，return false则阻止跳转

举一个栗子

import { onBeforeRouteLeave } from 'vue-router'

export default {
  setup() {
    onBeforeRouteLeave((to, from) => {
      if (to.name !== 'home') {
          return false
      }
    })
  }
}

举第二个栗子

栗子2表示路由跳转之前进行判断是否要离开，确认的话调用next()离开当前页面，ElMessageBox.confirm是element-plus的一个方法

onBeforeRouteLeave((to, from, next) => {

      ElMessageBox.confirm("您还未付款，是否确认离开支付？", {

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning"

      }).then(() => {

          next();

        }).catch(() => {

          console.log("000");

        });

    });

onBeforeRouteUpdate

---

新增的组合式Api，路由更新时触发

import { onBeforeRouteUpdate } from 'vue-router'

export default {
  setup() {
    onBeforeRouteUpdate((to, from) => {
      if (to.params.id !== from.params.id) {
        console.log('......')
      }
    })
  }
}

onBeforeRouteLeave、onBeforeRouteUpdate是vue-router提供的两个composition api，它们只能被用于setup中。

---

路由守卫语法变更

// 原写法
Router.beforeEach((to, from, next) => {
  if (ok) {
    next()
  } else {
    next(false)
  }
})

// 新写法
Router.beforeEach((to, from) => {
    if (ok) {
        console.log('...')
    } else {
        return false
    }
})

部分重大变更

• 使用createRouter替换new Router()
• mode: 'history'选项替换为更灵活的名称history
• 带有空path的命名子路由不再添加斜线

Router3	Router4
history	createWebHistory()
hash	createWebHashHistory()
abstract	createMemoryHistory()