vue3路由的基本使用

安装路由依赖：

npm install vue-router（默认安装最新版本）

1、声明式路由

components目录下创建Home页：

<template>
  <div>
    <h1>Home页</h1>
  </div>
</template>

Add页：

<template>
  <div>
    <h1>Add页</h1>
  </div>
</template>

Update页：

<template>
  <div>
    <h1>Update页</h1>
  </div>
</template>

List页：

<template>
  <div>
    <h1>List页</h1>
  </div>
</template>

src目录下创建routers目录并创建router.js文件：

// 创建路由对象需要使用的函数
import {createRouter,createWebHashHistory} from 'vue-router'

import Home from "../components/Home.vue"
import List from "../components/List.vue"
import Add from "../components/Add.vue"
import Update from "../components/Update.vue"

// 创建路由对象
const router = createRouter({
    // 记录路由的历史
    history:createWebHashHistory(),
    // 定义组件和外部访问映射路径的关系
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/add',
            component:Add
        },
        {
            path:'/update',
            component:Update
        },
        {
            path:'/list',
            component:List
        },
        {
            path:'/',
            // 路由的重定向
            redirect:'/home'
        }
    ]
})

// 向外导出路由对象
export default router

main.js文件中导入并使用路由对象：

import { createApp } from 'vue'
import App from './App.vue'

// 导入路由对象
import router from "./routers/router.js"

const app = createApp(App)
// 使用路由对象
app.use(router)
app.mount('#app')

App.vue：

<template>
  <div>
    <h1>这是App页的头部</h1>
    <ul>
      <!--   该标签用于在使用路由的情况下访问指定路径   -->
      <li><router-link to="/home">home页</router-link></li>
      <li><router-link to="/add">add页</router-link></li>
      <li><router-link to="/list">list页</router-link></li>
      <li><router-link to="/update">update页</router-link></li>
    </ul>
    <!--  该标签将被替换成具体的.vue文件,用于展示路由跳转到的.vue文件  -->
    <router-view class="rv"></router-view>
    <h1>这是App页的尾部</h1>
  </div>

</template>

<style scoped>
.rv{
  border: 1px red solid;
  background: aquamarine;
}
</style>

2、编程式路由

App.vue：

<script setup>

  import {ref} from 'vue'
  import router from "./routers/router.js"

  let sendPath = ref("")

  function submit(){
    // 使用路由对象的push方法，通过该方法访问指定路径
    router.push(sendPath.value)
  }


</script>

<template>
  <div>
    <input type="text" v-model="sendPath">
    <button @click="submit()">跳转</button>
    <hr>
    <router-view class="rv"></router-view>
  </div>
</template>

<style scoped>
.rv{
  border: 1px solid red;
  background: beige;
}
</style>

3、路由传参

components目录下创建ShowDetail.vue：

<script setup>

  import {useRoute} from "vue-router"
  import {onUpdated, ref} from "vue"

  let userId = ref(0)
  let userName = ref("")

  // useRoute函数获取保存路径参数的对象

  let pathParamObj = useRoute()

  // pathParamObj.params接收路径参数，获取参数时，获取的参数名与接收时定义的参数名要一致
  userId.value = pathParamObj.params.userId
  userName.value = pathParamObj.params.userName

  // 当响应式数据改变时，执行更新操作
  onUpdated(()=>{
    userId.value = pathParamObj.params.userId
    userName.value = pathParamObj.params.userName
  })

</script>

<template>
  <h1>ShowDetail页</h1>
  <h3>id={{userId}},name={{userName}}</h3>
</template>

components目录下创建ShowDetail02.vue：

<script setup>

  import {useRoute} from "vue-router"
  import {onUpdated, ref} from "vue"

  let userId = ref(0)
  let userName = ref("")

  // useRoute函数获取保存路径参数的对象

  let pathParamObj = useRoute()

  // pathParamObj.query接收键值对参数，获取参数时，获取的参数名与接收时定义的参数名要一致
  userId.value = pathParamObj.query.userId
  userName.value = pathParamObj.query.userName

  // 当响应式数据改变时，执行更新操作
  onUpdated(()=>{
    userId.value = pathParamObj.query.userId
    userName.value = pathParamObj.query.userName
  })

</script>

<template>
  <h1>ShowDetail页</h1>
  <h3>id={{userId}},name={{userName}}</h3>
</template>

router.js：

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

// 导入对应.vue文件
import Add from "../components/Add.vue";
import Home from "../components/Home.vue";
import List from "../components/List.vue";
import Update from "../components/Update.vue";
import ShowDetail from "../components/ShowDetail.vue";
import ShowDetail02 from "../components/ShowDetail02.vue";

// 创建路由对象
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/',
            component:Home
        },
        {
            path:'/home',
            component:Home
        },
        {
            path:'/add',
            component:Add
        },
        {
            path:'/list',
            component:List
        },
        {
            path:'/update',
            component:Update
        },
        {
            // 接收路径类型参数的端口
            path:'/showDetail/:userId/:userName',
            component:ShowDetail
        },
        {
            // 接收键值对类型参数的端口
            path:'/showDetail02',
            component:ShowDetail02
        }
    ]
})

// 向外导出路由对象
export default router

App.vue：

<script setup>

  // 获取路由对象
  import router from "./routers/router.js"

  function showDetail(userId,userName){
    router.push(`/showDetail/${userId}/${userName}`)
  }

  function showDetail02(userId,userName){
    router.push(`/showDetail02?userId=${userId}&userName=${userName}`)
  }


</script>

<template>
  <div>
    <router-link to="/showDetail/1001/jack">声明式路由路径传参</router-link>
    <hr>
    <router-link to="/showDetail02?userId=1003&userName=smith">声明式路由键值对传参</router-link>
    <hr>
    <button @click="showDetail(1002,'tom')">编程式路由路径传参</button>
    <hr>
    <button @click="showDetail02(1004,'milan')">编程式路由键值对传参</button>
    <hr>
    <router-view></router-view>
  </div>
</template>

4、路由守卫

• 路由前置守卫（beforeEach）：在路由切换前被调用
• 路由后置守卫（afterEach）：在路由切换后被调用

router.js：

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

// 导入对应.vue文件
import Add from "../components/Add.vue";
import Home from "../components/Home.vue";
import List from "../components/List.vue";
import Update from "../components/Update.vue";

// 创建路由对象
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/',
            component:Home
        },
        {
            path:'/home',
            component:Home
        },
        {
            path:'/add',
            component:Add
        },
        {
            path:'/list',
            component:List
        },
        {
            path:'/update',
            component:Update
        }
    ]
})

// 设置路由的前置守卫，当路由发生跳转前会执行beforeEach函数中的回调函数
router.beforeEach((destination,current,next)=>{
    // destination 标识跳转到的目的路由，current表示当前路由，next表示放行(只有执行了该方法，路由才能完成跳转)
    // next("路径") 该操作表示路由的重定向
    console.log("beforeEach执行了...")
    console.log("上一个位置=",current.path)
    console.log("当前位置=",destination.path)
    next()
})

// 设置路由的后置守卫，当路由发生跳转前会执行afterEach函数中的回调函数
router.afterEach((destination,current)=>{
    console.log("afterEach执行了...")
})

// 向外导出路由对象
export default router

App.vue：

<script setup>

</script>

<template>
  <div>
    <h1>这是App页的头部</h1>
    <ul>
      <!--   该标签用于在使用路由的情况下访问指定路径   -->
      <li><router-link to="/home">home页</router-link></li>
      <li><router-link to="/add">add页</router-link></li>
      <li><router-link to="/list">list页</router-link></li>
      <li><router-link to="/update">update页</router-link></li>
    </ul>
    <!--  该标签将被替换成具体的.vue文件,用于展示路由跳转到的.vue文件  -->
    <router-view class="rv"></router-view>
    <h1>这是App页的尾部</h1>
  </div>

</template>

<style scoped>
.rv{
  border: 1px red solid;
  background: aquamarine;
}
</style>