Vue（3）——VueRouter & Pinia

1. VueRouter

Vue通常只有一个html文件，这就是单页面应用。而在一个页面中实现多页应用的效果，关键就在于监测页面URL的变化，当URL发生变化，则在页面中渲染相应的内容。Vue Router作为官方路由管理器，能够帮助更快的构建单页面应用。

1.1 基本路由

①在根目录里添加切换按钮：在根组件中引用vue-router提供给我们的RouterLink组件，来修改当前路由地址，以达到组件切换的效果；RouterView组件来进行显示的效果。

• RouterLink中除了可以通过输入path的方法来进行操作（<RouterLink to="/"></RouterLink>），还可以使用name的方法来进行操作（<RouterLink :to="{name: 'video1'}"></RouterLink>）

②创建对应页面内容组件：在views文件夹内进行书写

③配置路由：在router文件夹下的index文件中进行配置。配置内容包括三部分:path(路由地址)、name（路由名字）、component（路由切换后，当前页面要显示的组件）

• 两种component的配置方式
  1. 通过import直接引用（import HomeView from '../views/HomeView.vue' ）
  2. 通过箭头函数进行设置（() => import('../views/AboutView.vue')）

④最终效果

1.2 动态路由

①配置动态路由

②设置页面组件：添加props属性

③根目录：路径短可以输入path，路径长输入name、params

④最终效果

1.3 嵌套路由

①配置嵌套路由

②设置页面组件


③父组件

④最终效果

1.4 编程式导航（程序设计人员设计的主动跳转）

①修改子组件

1.5 路由传参

①原组件界面

②跳转组件界面

③最终效果

1.6 导航守卫

①路由界面

②最终效果

2. Pinia

2.1 简单说明

Vue中有很多的组件，当需要跨多个组件来实现两个组件的通信时，操作就会非常复杂，此时就需要一个全局的状态管理工具来进行处理，这就是Pinia。

2.2 使用说明

①模块定义
在stores文件夹下的counter文件中引入了ref、computed来进行响应式功能设置的组合函数，defineStore方法来定义pinia实例。该文件定义了counter模块，如果需要建立新的模块则在stores文件夹下创建新的js文件即可。

②使用：在想要使用的组件界面中进行引用。需要注意的是，引用的对象是一个结构，并没有进行执行，所以可以设置一个变量接收执行的方法，更方便之后调用模块中封装的属性和方法。

③最终效果