Vue 路由 Router

2024-01-29 10:21:16

什么是路由？

Hash 地址与组件之间的对应关系

前端路由的工作原理？

1.用户点击了页面上的路由链接；

2.导致URL地址栏中的Hash值发生了变化；

3.前端路由监听到了Hash地址变化；

4.前端路由把当前Hash对应的组件渲染到浏览器中；

vue-router 安装和配置的步骤

1.安装vue-router 包

npm i vue-router@3.5.2 -S

2.创建路由模块,并声明路由的匹配规则

在src 源代码目录下，新建router/index.js，并初始化如下代码：

// 1. 导入 Vue 和 VueRouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2. 调用 Vue.use() 函数，把VueRouter 安装为 Vue 插件
Vue.use(VueRouter)

// 3. 创建路由的实例对象
const router = new VueRouter({
  routes: [ // 在routes 数组中，声明路由的匹配规则
    // path 表示要匹配的 hash 地址； component 表示要展示的路由组件
    { path: '/home', component: '@/component/Home.vue' },
    { path: '/about', component: '@/component/About.vue' },
  ]
})

// 4. 向外共享路由的实例对象
export default router

3.导入并挂载路由模块

在src/main.js 入口文件中，导入并挂载路由模块。示例代码如下：

import Vue from 'vue'
import App from './App.vue'

// 1. 导入路由模块
import router from '@/router'

new Vue({
    render: h => h(App),
    // 2. 挂载路由模块
    router
}).$mount('#app')

4.声明路由链接和占位符

在 src/App.vue 组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符

<template>
  <div class="app-container">
    <h1>App 组件</h1>
    <!-- 1. 定义路由链接 -->
    <router-link to="/home">首页</router-link>
    <router-link to="about">关于</router-link>

    <hr>

    <!-- 2. 定义路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>
</style>

嵌套路由

动态路由

动态路由：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性

// 1. 路径参数传参规则
{ path: 'home/:id', component: '@component/Home.vue' }

// 页面上使用 $route.params 接收
this.$route.params.id


// 2. 使用 props 传参 ,并接收参数
{ path: 'home', component: '@component/Home.vue', props: true }

<template>
  <div>
    {{id}}
  </div>
</template>

<script>
export default {
  name: '',
  props: ['id'],
}
</script>

路径参数 & 查询参数

在 hash 地址中， / 后面的参数项，叫做“路径参数”，? 后面的参数项，叫做“查询参数”

this.route 中，path 只是路径部分；fullPath 是完成的地址

声明式导航 & 编程式导航

在浏览器中，点击链接实现的导航方式叫做声明式导航（普通网页中点击 <a> 链接、 vue项目中点击 <router-link> ）

在浏览器中，调用API方法实现导航的方式叫做编程式导航（普通网页中调用 location.href 跳转的方式、 vue-router的API）

vue-router 中的编程式API

1. this.$router.push('hash 地址')

跳转到指定 hash 地址，并增加一条历史记录

2. this.$router.replace(' hash 地址')

跳转到指定的 hash 地址，并替换掉当前的历史记录

3.this.$router.go(数值 n) ===》$router.back() 前进 $router.forward() 后退

实现导航历史前进、后退

全局前置守卫

import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

// 创建路由实例对象
const router = new VueRouter

// 全局前置守卫
router.beforeEach((to, from, next) =>{
  // to 是将要访问路由的信息对象
  // from 是将要离开的路由信息对象
  // next 是一个函数，调用 next() 表示放行，允许这次路由导航，next('hash地址')，next(false)停留在当前页面
})

码农公寓