Vue3：路由

置顶食懵你啊

已于 2024-05-12 15:56:44 修改

阅读量976

点赞数 8

文章标签：前端 vue JavaScript route

于 2024-05-11 21:20:07 首次发布

本文链接：https://blog.csdn.net/2301_79526467/article/details/138729206

版权

1. 路由简介

在Vue3中，路由是一个核心概念，特别是在构建单页面应用程序（SPA）时。以下是Vue3中路由的基本概念：

1. **路由（Route）**：在Vue3中，路由是指根据特定的规则将用户请求从源地址（URL）映射到目标组件（或页面）的过程。通过定义路由规则，我们可以将不同的URL映射到相应的组件，实现页面的切换效果。
2. **路由器（Router）**：路由器是负责管理路由的组件或模块。它定义了路由的规则、路径和对应的处理函数或组件。你可以将路由器视为一个中央控制器，负责管理所有的路由。在Vue3项目中，路由器是由路径和对应的组件构成的。我们通过切换不同的路径来展示不同的组件效果。
3. **前端路由**：在Vue3中，前端路由主要用于单页面应用程序（SPA）。在这种应用中，所有的页面都在同一个HTML文件中加载，通过JavaScript动态地切换显示不同的内容。前端路由的实现方式主要是通过监听URL的变化（如hash或history模式），然后根据这些变化来渲染相应的组件。
4. **嵌套路由**：Vue Router支持嵌套路由，这意味着你可以在父路由下定义子路由，实现复杂的页面结构。例如，你可以在一个用户页面的路由下定义用户详情、用户设置等子路由。
5. **路由守卫**：Vue Router提供了路由守卫（beforeEach、beforeResolve、afterEach等），这些守卫可以在路由切换前后执行相应的逻辑，例如权限验证、路由拦截等。

总的来说，Vue3中的路由是一个强大的工具，它可以帮助我们构建出结构清晰、易于维护的单页面应用程序。通过合理地定义和使用路由，我们可以实现页面之间的流畅切换，提升用户体验。

2. HelloWorld

入门案列，实现在同一个页面中使某个部分进行组件切换

组件准备

Add组件

<script setup>
</script>

<template>
    <div>
        <h1>Add</h1>
        <router-link to="list">list页</router-link>
    </div>
</template>

<style scoped>

</style>

Home组件

<script setup>
</script>

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

<style scoped>

</style>

Inert组件

<script setup>
</script>

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

<style scoped>

</style>

List组件

<script setup>
</script>

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

<style scoped>

</style>

App组件

<script setup>
</script>

<template>
  <div>
    APP顶部
    <hr>
    <router-link to="home">home页</router-link> <br>
    <router-link to="list">list页</router-link> <br>
    <router-link to="add">add页</router-link> <br>
    <router-link to="inert">inert页</router-link> <hr>

    默认展示位置：<router-view></router-view>
    <hr>
    APP底部 <br>
    <hr>
    Home视图展示:<router-view name="HomeView"></router-view> <hr>
    List视图展示:<router-view name="ListView"></router-view> <hr>
    Inert视图展示:<router-view name="InertView"></router-view> <hr>
    Add视图展示:<router-view name="AddView"></router-view> <hr>
  </div>
</template>

<style scoped>

</style>

routers配置

//导入创建路由对象的函数
import {createRouter, createWebHistory} from 'vue-router'

//导入.vue组件
import Home from '../components/Home.vue'
import Add from '../components/Add.vue'
import Inert from '../components/Inert.vue'
import List from '../components/List.vue'

//通过函数创建路由对象
const router = createRouter({
    //history属性用于记录路由的历史（固定写法，用函数创建个history对象即可）
    history:createWebHistory(),
    //用于定义不同路径和多个组件的对应关系
    routes:[
        {
            path:'/home',
            components:{
                //没有指定名称的router-view组件上默认显示该路径内容
                default:Home,
                //指定的router-view组件上显示该路径的内容
                HomeView:Home
            }
        },
        {
            path:'/add',
            components:{
                AddView:Add
            }
        },
        {
            path:'/inert',
            components:{
                InertView:Inert
            }
        }, 
        {
            path:'/list',
            components:{
                ListView:List
            }
        },
        {
            path:"/",
            component:Home
        },
        //路由重定向
        {
            path:"/show",
            redirect:"/list"
        }
    ]
})

//对外暴露
export default router

main.js引入路由配置文件

import { createApp } from 'vue'

import App from './App.vue'

//导入router模块
import router from './routers/router.js'

const app = createApp(App)

//绑定路由对象
app.use(router)
app.mount('#app')

3. 编程式路由（useRouter）

普通路由：

<router-link to="/home">Home</router-link> 该路由路径由to定义，此时只能跳转到home页

编程式路由：

* 通过useRouter,动态决定向那个组件切换的路由
* 在 Vue 3 和 Vue Router 4 中，你可以使用 `useRouter` 来实现动态路由(编程式路由)
* 这里的 `useRouter` 方法返回的是一个 router 对象，你可以用它来做如导航到新页面、返回上一页面等操作。

案例需求: 通过普通按钮配合事件绑定实现路由页面跳转,不直接使用router-link标签

<script setup>
//导入修改路由路径的函数
import {useRouter} from 'vue-router'
import {ref} from 'vue'

//创建动态路由对象
const router = useRouter()

//创建接收文本框信息的变量
let myPath = ref("")
function myPage() {
  //通过动态路由对象修改路径
  router.push(myPath.value)
}

</script>

<template>
  <div>
    <!--声明式路由-->
    <router-link to="/home">Home</router-link> <br>
    <router-link to="/add">Add</router-link> <br>
    <router-link to="/list">List</router-link> <br>
    <router-link to="/update">Update</router-link> <br>

    <!--编程式路由-->
    <button @click="myPage()">GO</button>
    <input type="text" v-model="myPath"> <hr>

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

<style scoped>

</style>

4. 路由传参（useRoute）

路径参数

在url中使用动态字段实现传递参数称为

如：/home/id/language 此时id和language两个字段的内容可以动态变化的，这两个字段值就是传递的参数

键值对参数

类似于get请求中的url，参数是键值对形式的

如：/home?id=value&language=java

<script setup>
//导入响应式数据函数，生命周期函数
import {ref, onUpdated} from 'vue'
//导入创建路由对象函数
import {useRoute} from 'vue-router'

let id = ref(0)
let language = ref("")

//获取路由对象
const router = useRoute()
id.value = router.params.id
language.value = router.params.language

/**
 * router.params用于接收路径参数
 * router.query 用于接收键值对参数
 */
//onUpdated生命周期函数，一旦数据请求发生变化会自动执行
onUpdated(() => {
    id.value = router.params.id
    language.value = router.params.language
})

</script>

<template>
    <div>
        <h1>ShowDetail</h1>
        <h3>{{`${language}${"牛逼"}${id}`}}</h3>
    </div>
</template>

<style scoped>

</style>

<script setup>

import {useRouter} from 'vue-router'

//获取路由对象
const router = useRouter()

function showDetail(id, language) {
    //路径传参
    //router.push(`/showDetail/${id}/${language}`)
    router.push({path:`/showDetail/${id}/${language}`})
}

function showDetail2(id, language) {
    router.push(`/showDetail2?id=${id}&language=${language}`)
}

</script>

<template>
    <div>
        <router-link to="/showDetail/1/java">声明式路由路径传参</router-link> <br>
        <button @click="showDetail(0, 'C++')">编程式路由路径传参</button> <hr>

        <router-link to="/showDetail2?id=3&language=python">声明式路由键值对传参</router-link> <br>
        <router-link v-bind:to="{path:'showDetail2', query:{id:4, language:'GO'}}">声明式路由键值对传参</router-link>
        <button @click="showDetail2(5, 'PHP')">编程式路由键值对传参</button>
        <hr>
        <router-view></router-view>
    </div>
</template>

<style scoped>

</style>

/**导入创建路由对象函数 */
import {createRouter, createWebHashHistory} from 'vue-router'

//导入组件
import ShowDetail from '../components/ShowDetail.vue'
import ShowDetail2 from '../components/ShowDetail2.vue'

//通过函数创建路由对象
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            //键值对参数默认自动解析，无需占位符
            path:"/showDetail2",
            component:ShowDetail2  
        },
        {
            //路由路径传参：为该路径设置占位符
            path:"/showDetail/:id/:language",
            name:"showDetail",
            component:ShowDetail
        }]
})

//导出路由对象
export default router

5. 路由守卫

//路由守卫
/**
 * 全局前置守卫：在路由切换之前被调用
 * 可用于对数据进行处理，校验用户是否登录等功能
 * to   代表发送数据到哪去
 * from 代表请求数据从哪来
 * next 代表放行，不调用默认拦截（类似filterChen）
 */
router.beforeEach(
    (to, from, next) => {
        console.log("before")
        console.log(from.path)
        console.log(to.path)
        //放行，不执行该方法默认拦截
        next()
})

/**
 * 全局后置守卫：在路由切换之后被调用
 * 可用于处理数据
 */
router.afterEach(
    (to, from) => {
        console.log("after")
    }
)

6. 路由案列

页面组件

Home组件

<script setup>
  //导入路由对象
  import {ref} from 'vue'
  import {useRoute, useRouter} from 'vue-router'

  let username = ref("")
  //创建路由对象
  const route = useRoute()
  //获取当前会话username值
  username = window.sessionStorage.getItem("username")

  //获取路由器管理路径跳转
  const router = useRouter()

  function loginOut() {
    //清除登录后的会话数据
    window.sessionStorage.removeItem("username")
    //跳转页面
    router.push("login")
  }


</script>

<template>
  <div>
    <h1>Home</h1>
    <h1>欢迎 {{ username }} 用户登录</h1>
    <button @click="loginOut()">退出登录</button>
  </div>
</template>

<style scoped>

</style>

Login组件

<script setup>

//导入创建路由器对象
  import {reactive} from 'vue'
  import {useRouter} from 'vue-router'

  let user = reactive({
    username:"",
    password:""
  })

  //创建路由器
  const router = useRouter()

  function userLogin() {
    //判断用户登录时输入账号密码是否正确
    if ("root" == user.username && "123456" == user.password){
      //正确则存入会话中，不关闭浏览器下次可直接访问
      window.sessionStorage.setItem("username", user.username)
      //路由器进行页面跳转
      router.push(`/home?username=${user.username}&password=${user.password}`)
    } else {
      //账号密码有误则弹窗提示
      alert("账号或密码有误")
    }
  }
</script>

<template>
  <div>
   账号：<input type="text" v-model="user.username"> <br>
   密码：<input type="password" v-model="user.password"> <br>
   <button @click="userLogin()">登录</button> <br>
  </div>
</template>

<style scoped>

</style>

App组件

<script setup>
</script>

<template>
  <div>
    <router-link to="/home"></router-link>
    <router-link to="/login"></router-link>

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

<style scoped>

</style>

路由器配置信息

//导入函数
import {createRouter, createWebHashHistory} from 'vue-router'

//导入路由组件
import Home from '../components/Home.vue'
import Login from '../components/Login.vue'

//创建路由对象
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            paht:"/",
            component:Login
        },
        {
            path:"/home",
            component:Home
        },
        {
            path:"/login",
            component:Login
        }
    ]
})

//控制访问Home页，每次访问都要进行页面跳转校验，是否已经登录过
router.beforeEach((to, from, next) => {
    //判断是否登录过
    if (to.path == '/login') {
        //放行
        next()
    } else {
        //会话中有账号信息也直接放行
        if (window.sessionStorage.getItem("username") != null) {
            next()
        } else {
            //页面重定向
            next("/login")
        }
    }
})

//对外暴露路由
export default router

main.js

import { createApp } from 'vue'

import App from './App.vue'
import router from './routers/router'

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