vue路由

 安装

npm install vue-router@4

 Vue Router 是vue.js的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举

功能包括：

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

vue3加了俩新的生命周期钩子

1、作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

2、具体名字：

actived：路由组件被激活时触发；

deactived：路由组件失活时触发。

最常见使用：

在一个后台项目里，通常有上左右、左上右或者简单的上下的界面结构，如图：

 那么，main就是真正需要显示页面的地方，也就是说，所有的页面，都是加载在main下的这个router-view节点，这是router-view基础用法之一，作为根节点使用，他会把当前路由的页面，替换到这个节点下。

补充：关于组件和页面组件

组件分为页面组件和功能性组件

• 像slider、swiper这种在很多个页面会用到就抽组件，这种叫功能性组件，一般放在components中
• 像实现页面结构架构的，一般放在layouts的components里，叫页面组件

---

使用

html使用vue路由：

①首先把js引入

②html代码

router-link:

代替了<a>标签，href用to代替，这样写的好处是可以在不重新加载页面的情况下更改URL，处理URL的生成以及编码。

router-view：

是个根节点，挂载在根节点的组件，可以通过router-link进行跳转，但是只能跳转组件！！

所以说<a>和router的区别之一就是，router只能组件跳转，这种行为叫组件切换，可以将目标组件覆盖到当前router-link的父级节点上，从而实现模拟页面跳转效果。默认模式下，vue-router不会缓存路由组件，即 当你从A跳转到组件B的时候，A会被卸载，会执行生命周期中的卸载方法，当有需要的时候，可以使用keep-alive 包裹你的路由组件，以实现 缓存页面的效果，使得，当你从A->B再到A的时候，A不会重新执行created生命周期，但是通常需要避免缓存过多的页面栈，避免内存溢出造成卡顿。

③：js代码

 实现效果：

---

vue项目里路由的使用：

①安装 | Vue Router

npm install vue-router@4

②在src下新建router文件夹，并在此文件夹下新建index.js，官方的配置可能不容易看懂

这是router/index.js:

import{
    createRouter,
    createWebHashHistory
} from 'vue-router'
 
//import Index from '../src/pages/index.vue'
 
const routes =[{
    //在此配置
    path:"/",
    component:Index
 
}]
 
const router = createRouter({
    history:createWebHashHistory(),
    routes
})
 
export default router

③然后在main.js里引入

main.js里的配置要改一下

import { createApp } from 'vue'
import App from './App.vue'
 
createApp(App).mount('#app')

改为

import { createApp } from 'vue'
import App from './App.vue'
 
const app = createApp(App)
app.mount('#app')//写在最底部

 挂载上路由：

import router from './router'
app.use(router)

一般会把 <router-view></router-view>放在App.vue里，渲染页面组件

---

守卫

vue的路由就是一个页面的组件跳转到另一个页面的组件用的，vue-router作为vue框架全局的路由管理（导航守卫），导航守卫里，重点是 登录状态、验证和权限验证

其中比较重要的api：beforeEach、afterEach

beforeEach：跳转前要执行的动作

比如，从A>B，进入B之前，我需要验证，该用户是否登录，或者说，当前用户的当前状态，是否有权进入B页面，这时候，就可以在beforeEach里进行判断，登录状态通常会结合vuex 或者其他状态管理模块来实现。