Vue路由机制router

置顶小邋遢不就邋遢

已于 2024-08-15 10:04:06 修改

阅读量2k

点赞数 29

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-08-09 16:28:52 首次发布

本文链接：https://blog.csdn.net/qq_58723910/article/details/140933365

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.1 路由简介

1 什么是路由？

定义：路由就是根据不同的 URL 地址展示不同的内容或页面。
通俗理解：路由就像是一个地图，我们要去不同的地方，需要通过不同的路线进行导航。

2 路由的作用

单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验；
路由还可以实现页面的认证和权限控制，保护用户的隐私和安全；
路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面。

3 Vue3的路由实现

Vue Router 是 Vue.js 的官方路由
嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码

1.2 路由入门案例

1 案例需求分析

在这里插入图片描述

2 创建项目和导入路由依赖

npm create vite //创建项目cd 项目文件夹 //进入项目文件夹
npm install //安装项目需求依赖
npm install vue-router@4 --save //安装全局的vue-router 4版本

3 准备页面和组件

components/Home.vue

<script setup>
</script>

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

<style scoped>
</style>

components/List.vue

<script setup>
</script>

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

<style scoped>
</style>

components/Add.vue

<script setup>
</script>

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

<style scoped>
</style>

components/Update.vue

<script setup>
</script>

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

<style scoped>
</style>

App.vue

<script setup>
</script>

<template>
    <div>
      <h1>App页面</h1>
      <hr/>
        <!-- 路由的连接 -->
        <router-link to="/">home页</router-link> <br>
        <router-link to="/list">list页</router-link> <br>
        <router-link to="/add">add页</router-link> <br>
        <router-link to="/update">update页</router-link> <br>
      <hr/>
      <!-- 路由连接对应视图的展示位置 -->
      <hr>
      默认展示位置:<router-view></router-view>
      <hr>
      Home视图展示:<router-view name="homeView"></router-view>
      <hr>
      List视图展示:<router-view name="listView"></router-view>
      <hr>
      Add视图展示:<router-view name="addView"></router-view>
      <hr>
      Update视图展示:<router-view name="updateView"></router-view>
    </div>
</template>

<style scoped>
</style>

4 准备路由配置

src/routers/router.js

// 导入路由创建的相关方法
import {createRouter,createWebHashHistory} from 'vue-router'

// 导入vue组件
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({
    //createWebHashHistory() 是 Vue.js 基于 hash 模式创建路由的工厂函数。在使用这种模式下，路由信息保存在 URL 的 hash 中，
    //使用 createWebHashHistory() 方法，可以创建一个路由历史记录对象，用于管理应用程序的路由。在 Vue.js 应用中，
    //通常使用该方法来创建路由的历史记录对象。
    //就是路由中缓存历史记录的对象，vue-router提供
    history: createWebHashHistory(),
    routes:[
        {
            path:'/',
            /* 
                component指定组件在默认的路由视图位置展示
                components:Home
                components指定组件在name为某个值的路由视图位置展示
                components:{
                    default:Home,// 默认路由视图位置
                    homeView:Home// name为homeView的路由视图位置
                }   
            */
            components:{
                default:Home,
                homeView:Home
            }      
        },
        {
            path:'/list',
            components:{
                listView : List
            } 
        },
        {
            path:'/add',
            components:{
                addView:Add
            } 
        },
        {
            path:'/update',
            components:{
                updateView:Update
            }  
        },
    ]

})

// 对外暴露路由对象
export default router;

5 main.js引入router配置

修改文件：main.js (入口文件)

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//导入router模块
import router from './routers/router.js'
let app = createApp(App)
//绑定路由对象
app.use(router)
//挂在试图
app.mount("#app")

6 启动测试

npm run dev

1.3 路由重定向

重定向的作用：将一个路由重定向到另一个路由上

语法:

 {
     path: "/接收路径",
     redirect: "/重定向路径"
 }

router.js

// 导入路由创建的相关方法
import {createRouter,createWebHashHistory} from 'vue-router'

// 导入vue组件
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:'/',
            components:{
                default:Home,
                homeView:Home
            }      
        },
        {
            path:'/list',
            components:{
                listView : List
            } 
        },
        {
            path:'/showAll',
            // 重定向
            redirect :'/list'
        },
        {
            path:'/add',
            components:{
                addView:Add
            } 
        },
        {
            path:'/update',
            components:{
                updateView:Update
            }  
        },
    ]

})

// 对外暴露路由对象
export default router;

App.vue

<script setup>
</script>

<template>
    <div>
      <h1>App页面</h1>
      <hr/>
        <!-- 路由的连接 -->
        <router-link to="/">home页</router-link> <br>
        <router-link to="/list">list页</router-link> <br>
        <router-link to="/showAll">showAll页</router-link> <br>
        <router-link to="/add">add页</router-link> <br>
        <router-link to="/update">update页</router-link> <br>
      <hr/>
      <!-- 路由连接对应视图的展示位置 -->
      <hr>
      默认展示位置:<router-view></router-view>
      <hr>
      Home视图展示:<router-view name="homeView"></router-view>
      <hr>
      List视图展示:<router-view name="listView"></router-view>
      <hr>
      Add视图展示:<router-view name="addView"></router-view>
      <hr>
      Update视图展示:<router-view name="updateView"></router-view>
    </div>
</template>

<style scoped>
</style>

1.4 编程式路由(useRouter)

普通路由

<router-link to="/list">list页</router-link> 这种路由,to中的内容目前是固定的,点击后只能切换/list对象组件(声明式路由)

动态路由

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

语法:

1.添加动态路由函数   import {useRouter} from 'vue-router'

2.获取动态路由对象   let router  = useRouter()

3.通过动态路由发起请求  router.push({path:'/list'})

案例需求: 通过在页面上输入路由路径动态显示目标组件

App.vue

<script setup type="module">

  import {useRouter} from 'vue-router'
  import {ref} from 'vue'
  //创建动态路由对象
  let router = useRouter()

  let  routePath =ref('')
  let  showList= ()=>{
      // 编程式路由
      // 直接push一个路径
      // router.push('/list')
      // push一个带有path属性的对象
      router.push({path:'/list'})
  }
</script>

<template>
    <div>
      <h1>App页面</h1>
      <hr/>
        <!-- 路由的连接 -->
        <!-- 动态输入路径,输入完毕后,根据输入的路径决定显示哪个组件 -->
        <button @click="showList()">showList</button> <br>
      <hr/>
      <!-- 路由连接对应视图的展示位置 -->
      <hr>
      默认展示位置:<router-view></router-view>
    </div>
</template>

<style scoped>
</style>

1.5 路由传参(useRoute)

路径参数

在路径中使用一个动态字段来实现，我们称之为 路径参数
- 例如：查看数据详情 /showDetail/1 ,1就是要查看详情的id,可以动态添值！

键值对参数

类似与get请求通过url传参,数据是键值对形式的
- 例如: 查看数据详情/showDetail?hid=1,hid=1就是要传递的键值对参数
在 Vue 3 和 Vue Router 4 中，你可以使用 useRoute 这个函数从 Vue 的组合式 API 中获取路由对象。
- useRoute 方法返回的是当前的 route 对象，你可以用它来获取关于当前路由的信息，如当前的路径、查询参数等。

语法:

import {useRoute, useRouter} from "vue-router"
let route = reactive(useRoute())
console.log(route.params)

<template>
  <div>
    <h1>我是详情页面</h1>
	//路径参数写法
    {{ route.params.id }}  ~~~~   {{ route.params.name }}
    
    //请求参数写法
    {{ route.query.id }}  ~~~~   {{ route.query.name }}
  </div>
</template>

案例需求 : 切换到ShowDetail.vue组件时,向该组件通过路由传递参数

修改App.vue文件

<script setup>
import {useRoute, useRouter} from 'vue-router'

 let route = useRouter() 
 function sendMsg(id,name){

  route.push(`/showDetail/${id}/${name}`)
 }

  function sendMsg2(id,name){

    route.push(`/showDetail2?id=${id}&name=${name}`)
  }


</script>

<template>
  <div>
     
     <!-- 1.路径参数 -->
     <router-link to="/showDetail/1/java">路径参数传递-java</router-link><br>
     <button @click="sendMsg(2,'mysql')">动态路由传递路径参数</button><br>


     <!-- 2.请求参数写法 -->
     <router-link to="/showDetail2?id=3&name=python">请求参数-python</router-link><br>
     <button @click="sendMsg2(4,'tomcat')">动态路由请求参数写法</button>

     <router-view></router-view>

  </div>
</template>

<style scoped>

</style>

修改router.js增加路径参数占位符

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

import ShowDetail from "../components/ShowDetail.vue"
import ShowDetail2 from "../components/ShowDetail2.vue"

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
      /* 通过:id   :name指定变量名称  */  
      {path: "/showDetail/:id/:name", component: ShowDetail},

      {path: "/showDetail2", component: ShowDetail2}
  
    ]
})

export default router

ShowDetail.vue 通过useRoute获取路径参数

<script setup>
import {useRoute} from "vue-router"

  let route = useRoute()
  

</script>

<template>
  <div>
      <h1>参数传递</h1>
      <div>{{ route.params.id }}  ~~~  {{ route.params.name }}</div>
  </div>
</template>

<style scoped>

</style>

ShowDetail2.vue通过useRoute获取键值对参数

<script setup>
import {useRoute} from "vue-router"

  //通过路由对象获取参数
  let route = useRoute()
  

</script>

<template>
  <div>
      <h1>参数传递</h1>
      <div>{{ route.query.id }}  ~~~  {{ route.query.name }}</div>
  </div>
</template>

<style scoped>

</style>

1.6 路由守卫

在 Vue 3 中，路由守卫是用于在路由切换期间进行一些特定任务的回调函数。路由守卫可以用于许多任务，例如验证用户是否已登录、在路由切换前提供确认提示、请求数据等。Vue 3 为路由守卫提供了全面的支持，并提供了以下几种类型的路由守卫：

全局前置守卫：在路由切换前被调用，可以用于验证用户是否已登录、中断导航、请求数据等。
全局后置守卫：在路由切换之后被调用，可以用于处理数据、操作 DOM 、记录日志等。
守卫代码的位置: 在router.js中

//全局前置路由守卫
router.beforeEach( (to,from,next) => {
    //to 是目标地包装对象  .path属性可以获取地址
    //from 是来源地包装对象 .path属性可以获取地址
    //next是方法，不调用默认拦截！ next() 放行,直接到达目标组件
    //next('/地址')可以转发到其他地址,到达目标组件前会再次经过前置路由守卫
    console.log(to.path,from.path,next)

    //需要判断，否者无限重复定向
    if(to.path === '/' || to.path === "/home"){
        //程序放行
        next()
    }else{
        //重定向到请求首页
        next("/")
    }  
} )

//全局后置路由守卫
router.afterEach((to, from) => {
    console.log(`Navigate from ${from.path} to ${to.path}`);
});