概念

1）理解：一个路由（route）就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理

2）前端路由：key是路径，value是组件

3）作用：设定访问路径，并将路径和组件映射起来（就是用于局部刷新页面，不需要请求服务器来切换页面）

Route（路由）

Route（路由）：

route 是指应用中的一个路由，它表示导航的目标。每个路由对象包含有关导航的信息，例如路径、参数、查询参数等。
在Vue中，通常通过路由配置中的 routes 数组来定义多个路由，每个路由对象都是一个 route。

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

route 对象通常可以在组件内通过 this.$route 访问。

Router（路由器）

router 是一个 Vue 插件，它提供了在应用中设置和管理路由的功能。
路由器通过将路由配置与应用的实例关联起来，使得应用能够根据 URL 的变化来动态加载组件，并提供了一些导航的方法。
在Vue中，你需要创建一个路由器实例，并将其传递给根实例。

import VueRouter from 'vue-router';

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

router 对象通常可以在组件内通过 this.$router 访问。

总的来说，route 是表示单个导航目标的对象，而 router 是提供整体路由管理功能的插件。在实际开发中，你会同时使用这两个概念来建立和管理应用的路由。

使用步骤

五个基础步骤（固定）

下载：VueRouter模块到当前工程，版本3.6.5，该版本支持vue2

 npm i vue-router
（默认安装的是4版本适配的是vue3，如果使用的是vue2的话，必须选定3版本  
npm i vue-router@3。

引入 + 安装注册
在main.js文件中引入并使用插件

// 第一步: 引入router 插件
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter)

在src文件夹下创建一个router文件夹然后在文件夹下创建index.js
核心代码如下：


// 第一步引入插件(本质是一个构造函数)
import VueRouter from 'vue-router'
 
// 引入一下用到的组件 
import Find from '@/views/Find.vue'
import Friend from '@/views/Friend.vue'
import My from '@/views/My.vue'
 
// 第二步创建router实例对象并暴露
export default new VueRouter({
    // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]

})
// 然后去main.js中引入router实例

回到main.js中引入创建的 router 并在vue实例对象中使用

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

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联

// 2个核心步骤
// 1. 建组件(views目录)，配规则
// 2. 准备导航链接，配置路由出口(匹配的组件展示的位置) 

import VueRouter from 'vue-router'
// 引入 路由对象
import router from '@/router/index.js'
Vue.use(VueRouter) // VueRouter插件初始化



Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router // 将路由对象导入到Vue容器中管理注册
}).$mount('#app')

这样就配置好了。

此时会看到url地址有#号，只是路由的两种模式之一，后面会讲解

路由的使用

由路由管理的地方 a标签转换成 router-link 标签 href="相对路径" 变成 to="路由路径"
要显示组件的地方需要用到 router-view占位，当点击时显示对应组件中的内容时就会替换掉router-view
通常由路由管理的组件单独放在 views 文件夹下，不需要在App组件中引入和注册

声明式导航-导航链接

需求：实现导航高亮效果
例如：在点即某个导航标签时，所对应的标签应该有一个高亮效果，指明当前是处于哪个环节

vue-router提供了一个全局组件router-link（取代a标签）

能跳转，配置to属性指定路径（必须），本质还是a标签，to无需#
能高亮，默认就会提供高亮类名，可以直接设置高亮样式

从浏览器看，其实使用了router-link 本质还是a标签

对于上图中，我的这一块，是处于正在使用的，会多出两个clss属性分别是：

router-link-exact-active 精确匹配
- 如果配置的是 to="/my" 只能匹配 /my
router-link-active 模糊匹配（用的多）
- 如果配置的是 to="/my" 可以匹配 /my /my/a /my/b ......

可以实现自定义的类名处理：
通过 linkActiveClass 和 linkExactActiveClass 去自定义

若是要使用高亮，只需要通过上诉的类名，添加css样式即可：

.footer_wrap a.router-link-active {
  background-color: purple;
}

声明式导航-跳转传参

目标：在跳转路由时，进行传值

查询参数传参
动态路由传参

查询参数传参

语法如下：

to="/path?参数名=值&参数名=值"
对应页面组件接收传递过来的值：$route.query.参数名 获取
url:http://localhost:8080/#/search?key=黑马程序员

动态路由传参

语法：

配置动态路由

可以匹配多个路径：例如/search/study 或者/search/admin 都可以匹配到

配置导航链接
- to="/path/参数值"
对应页面组件接收传递过来的值
- $route.params.参数值

代码示例：

两者传参方式的区别

查询参数传参（比较适合多个参数）

动态路由传参（优雅简洁，传单个参数比较方便）
值得注意的是，在配置动态规则的时候可以有参数的可选符，因为使用/search/:words表示时，此时必须要有参数值，不然不会匹配到对应的规则中，如果不传参数也能匹配的话，只需要在参数名后面加一个 ? 就行了例如：

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home }, // 静态路由传参
    // /search/:words? 表示匹配/search路由，可以不携带参数也能访问
    { path: '/search/:words?', component: Search } // 动态路由传参
  ]
})

Vue 路由-重定向

问题：网页打开的时候，url默认是 /路径，未匹配到组件时，会出现空白，例如路径/home为主界面，但是打开时是/ 所以此时匹配不到，从而导致页面空白
解决：重定向->匹配path后，强制跳转path路径

语法：

{path:匹配路径，redirect:重定向到的路径} ，注意这是在路由规则中去配置的

Vue 路由-404

作用：当路径找不到匹配时，给个提示页面
位置：配在路由最后
语法：path:"*" (任意路径)-前面不匹配就命中最后这个

Vue路由-模式设置

问题：路由的路径看起来不自然，有#

模式有两种：

hash路由（默认）例如：http://localhost:8080/#/home
history路由（常用）例如：http://localhost:8080/home （以后上线需要服务器端支持）

如何设置：

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    {path:'/',redirect:'/home'}, // 重定向到主界面
    { path: '/home', component: Home }, // 静态路由传参
    // /search/:words? 表示匹配/search路由，可以不携带参数也能访问
    { path: '/search/:words?', component: Search }, // 动态路由传参
    // 配置404页面，当请求地址都不存在时，给一个404页面，前提条件，一定要写在路由对最后面
    {path:'*',component:NotFind}
  ],
  // 注意：一旦采用了 history 模式，地址栏就没有#，需要后台配置访问规则
  mode:"history" // 路由url路径中不携带 #号
})

Vue中编程式导航-两种路由跳转方式

在 Vue 中，编程式导航指的是使用 JavaScript 来实现页面之间的路由跳转。Vue Router 提供了两种常见的编程式导航方式：

两种语法：

path路径跳转
name命名路由跳转

通过path路径跳转

语法：

使用 $router.push() 方法：

// 字符串路径
this.$router.push('/home');
// 对象形式
this.$router.push({ path: '/home' });
// 带查询参数
this.$router.push({ path: '/user', query: { id: 1 } }); // 对象中可以携带多个参数

使用 $router.replace() 方法：
$router.replace(location) 方法用于替换当前路由，不会留下历史记录。
与 $router.push() 用法类似：

this.$router.replace('/about');
// 对象形式
this.$router.replace({ path: '/about' });

通过name命名路由跳转（适合pathon路径长的场景）

在配置路由规则的时候，是可以配置name属性的，例如：

语法：

使用 $router.push() 方法：

  this.$router.push({
        // 通过路由名称去实现跳转
        name: "find",
        // 携带参数，这里的参数名要跟路由配置规则一致
        params: {
          words: this.content,
        },
      });

使用 $router.replace() 方法：
$router.replace(location) 方法用于替换当前路由，不会留下历史记录。
与 $router.push() 用法类似：

this.$router.replace({
  // 通过路由名称去实现跳转
  name: "find",
  // 携带参数，这里的参数名要跟路由配置规则一致
  params: {
    words: this.content,
  },
});

组件缓存 keep-alive

问题：从详情页点击返回到列表页面，数据重新加载了->希望回到原来的位置
原因：路由跳转后，组件被销毁了，返回回来组件又被重建了，所以数据重新被加载了。
解决：利用keep-alive 将组件缓存下来

概述：
keep-alive 是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
是一个抽象组件，它自身不会渲染成一个Dom元素，也不会出现在父组件链中

有点：
在组件切换过程中，把切换出去的组件保留在内存中，防止重复渲染Dom。减少加载时间及性能消耗，提高用户体验

注意：对于缓存来说，要明确什么需要缓存，什么不需要缓存

keep-alive的三个属性

include：组件名数组，只有匹配的组件会被缓存
exclude：组件名数组，任何匹配的组件都不会被缓存
max：最多可以缓存多少组实例

当被包裹的组件被缓存时，会多两个声明周期钩子函数

acitved：激活时，组件被看到时触发
deactived：失活时，离开页面组件看不见时触发

被缓存的组件，会失去原有的生命周期钩子函数，这里所说的失去并非是就一开始，就是说，一开始还是会进行钩子函数的执行，但是离开当前组件后，返回时，是不会在触发了，而是由 acitved 和 deactived 两个钩子去触发

标签：Vue,路径,path,组件,router,路由
From： https://www.cnblogs.com/zgf123/p/17844020.html

Vue中的路由

概念