526互联

一起学学Vue Router 4.X开发中用到的新特性

发布时间 2023-03-22 21:11:16作者: 键盘的旋律

前言：

vue3发布这么久以来，还没好好梳理过它相关的全家桶，今天我们先聊聊Vue Router 4.X的使用以及新特性！

可以说路由是一个简单又复杂的东西，简单指的是我们日常使用的过程中只是不断的调用它的API,复杂则是我们有的需求场景需要结合路由原理去处理数据等问题，此时我们就不得不对其原理有很深的理解，例如对于History模式和hash模式到底有什么区别，使用history需要做那些处理？他是如何不刷新页面更改我们的路由地址的等等！

一、安装并使用

// 安装vue-router@4 - 可以根据自己的工具使用安装
yarn add vue-router@4

// 使用vue-router@4
// 使用vue创建的app安装我们对应的路由。具体路由配置参考目录（二）
vueApp.use(router); // 前提是我们已经配置好了路由并使用createRouter生成了我们的路由对象

 

二、声明路由

import VueRouter from "vue-router";

// 1. 定义路由组件.
// 也可以从其他文件导入
// 此处的逻辑，大佬一点的都知道，其实我们的vue组件其实就是一个对象，每个vue组件中其实都有template，我就不多做献丑。
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

// 去使用router

路由管理配置也是个学问，当我们的项目庞大以后如何还能保证我们的路由清晰且高维护？？？

三、createRouter的变化

#createWebHistory

export declare function createWebHistory(base?: string): RouterHistory

此方法创建一个最常见的历史记录。

还有SEO对我们很重要的时候我们需要使用此函数创建路由！！！

它的参数表示我们的资源访问存储在服务器的具体位置

createWebHistory('/goods/') // 表示我们需要使用http://127.0.0.1/goods/xxx去访问我们的项目,此处的ip可以是我们服务器的域名或者本地的服务端口名称，它一定是由http提供服务的！

#createWebHashHistory

export declare function createWebHashHistory(base?: string): RouterHistory

方法参数与createWebHistory出入不大，但是此处如果我们没有提供hash标识他会自动为我们的路由加上 ’#‘

createWebHashHistory('/folder/') // 给出的网址为 `https://baidu.com/folder/#`

createWebHashHistory('/folder/#/app') // 给出的网址为 `https://baidu.com/folder/#/app`
// at file:///base/index.html
createWebHashHistory('/file') // 给出的网址为 `file:///base/index.html#`

此方式支持file:///xxx 的访问方式，但是会忽略掉我们的base参数。

#createMemoryHistory

export declare function createMemoryHistory(base?: string): RouterHistory

此方法创建一个基于内存的历史纪录，通常是为了处理我们的SSR的时候使用的，它可以在任意位置开始，判断上下文中不存在则直接调用push or replace直接将当前位置设为开始位置！

 

四、其他要点

impot {
    START_LOCATION,
    useRouter,
    useRoute
} from 'vue-router'; 


START_LOCATION // 主要用于判断我们路由初始的位置信息,与守卫路由中的from是相等的 ！

useRouter() // 获取路由的能力调用其返回值可以使用路由api 类似以前的this.$router;

useRoute() // 获取当前页面的路由信息，包含query,params，meta等数据信息。

// tips 还有我们需要对路由全局路由编码以及解码自定义的时候可以在createRouter的时候 parseQuery,stringifyQuery,去做一个全局的配置！