一、什么是路由
1、VueRouter的作用
VueRouter是Vue.js官方提供的路由管理器，用于实现单页面应用中的路由跳转功能。通过VueRouter，我们可以声明式地定义页面之间的导航关系，然后根据这些定义的规则，VueRouter会监听浏览器的URL变化，并且根据定义的规则匹配到对应的组件进行渲染。同时，VueRouter还支持路由参数、动态路由、嵌套路由等功能，能够满足复杂的路由需求。通过使用VueRouter，我们可以实现页面的切换、前进、后退，还可以实现动态加载组件，提高应用的性能和用户体验。
2、VueRouter的基本概念
路由表示一个映射关系，即 URL 路径到组件的映射。在 VueRouter 中，一个路由对象通常包含两个主要部分：path（路径）和 component（组件）。
二、Vue路由的主要特点包括：
1. 嵌套路由：可以根据页面的层次结构定义嵌套的路由规则，方便管理复杂的页面布局和导航。
2. 动态路由：可以定义带有参数的路由规则，根据不同的参数来展示不同的页面内容。
3. 路由懒加载：可以按需加载页面组件，提高应用程序的性能和加载速度。
4. 导航守卫：可以在路由跳转前后执行一些逻辑操作，比如检查用户是否登录等。
5. 编程式导航：可以通过编写代码动态地进行页面导航，而不是通过用户的手动点击链接。
三、VueRouter的基本用法
1、创建路由实例
创建路由实例大概有以下几个步骤：
1.1安装VueRouter
npm install vue-router
或者
yarn add vue-router
1.2在index.js中引入vue和vueRouter
import Vue from "vue";
import VueRouter from "vue-router";1.3在index.js中通知vue使用Router
Vue.use(VueRouter);1.4定义路由
每个路由应该映射一个路径到一个组件。这些路由被定义在一个数组内，数组的每个元素都是一个路由记录（route record）。
const routes = [ { path: '/', name: 'Home', component: () => import('@/components/Home.vue') // 懒加载组件 }, { path: '/about', name: 'About', // component: About, // 如果不是懒加载，可以直接这样引入 component: () => import('@/components/About.vue') // 懒加载组件 } // 定义更多的路由...
];1.5创建路由实例
const router = new Router({ mode: 'history', // 使用HTML5 History模式 base: process.env.BASE_URL, // 基本路径，从环境变量中获取 routes // 简写，相当于 routes: routes
});1.6导出路由实例
export default router;1.7在Vue实例中使用路由实例
在你的Vue应用入口文件（如src/main.js）中，引入并使用导出的路由实例。
import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由实例 new Vue({ router, // 将路由实例注入到Vue实例中 render: h => h(App),
}).$mount('#app');2、定义路由映射的基本步骤
2.1引入组件：
首先，你需要引入你想要通过路由访问的Vue组件。
// 引入组件
import Home from '@/components/Home.vue';
import About from '@/components/About.vue'; 2.2定义路由：
然后，创建一个路由数组，并在其中定义你的路由。每个路由都是一个对象，它至少包含path和component属性。
// 定义路由
// 每个路由应该映射一个路径到一个组件
const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // 可以使用异步组件来优化加载时间 component: () => import('@/components/About.vue') } 2.3创建路由实例：
使用Vue Router的构造函数new Router()，并传入一个包含routes属性的配置对象来创建路由实例。routes属性的值就是你之前定义的路由数组。
2.4导出路由实例：
最后，将路由实例导出，以便在你的Vue应用中使用它。
3、将路由实例挂载到Vue实例上
Vue CLI项目中的main.js示例 ：
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router, // 将路由实例传递给Vue实例
render: h => h(App) // 渲染App组件
// $mount('#app') 这一行在Vue CLI项目中是省略的
});
4、路由链接和路由视图的使用
路由链接（通常使用<router-link>组件）和路由视图（<router-view>组件）是Vue Router中两个非常核心的组件，它们分别用于导航和渲染页面内容。
4.1路由链接（<router-link>）
<router-link>是Vue Router提供的一个组件，用于创建导航链接。当用户点击这些链接时，它们会触发Vue Router的导航逻辑，而不是重新加载页面。<router-link>组件会渲染成标准的<a>标签，但是你可以通过tag属性来改变它渲染成的标签类型（比如<li>、<span>等）。
<router-link to="/">Home</router-link>
<router-link :to="{ name: 'about' }">About</router-link> 在上面的例子中，第一个<router-link>使用了字符串来指定路径（/），而第二个则使用了对象语法，其中name属性指定了路由的名称（这要求你在路由配置中为每个路由指定一个唯一的name）。
注意：tag属性的使用：
<router-link to="/foo" tag="li">Foo</router-link>
4.2路由视图（<router-view>）
<router-view>是Vue Router的另一个组件，它用于渲染匹配到的路由组件。你可以把它想象成一个占位符，Vue Router会根据当前的路由路径来决定渲染哪个组件到这个占位符的位置，也就是你需要让目标组件在哪里展示，就将这个路由视图添加到哪里。
<template> <div id="app"> <header> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </header> <main> <!-- 路由视图，用于渲染匹配到的组件 --> <router-view></router-view> </main> </div>
</template> 在上面的例子中，当用户点击<router-link>导航链接时，Vue Router会更新URL并查找匹配的路由。一旦找到匹配的路由，它就会将对应的组件渲染到<router-view>所在的位置。
4.3小结
<router-link>用于创建导航链接，用户点击后会触发Vue Router的导航逻辑。<router-view>是路由组件的占位符，Vue Router会根据当前路由渲染相应的组件到这个位置。
四、路由参数和动态路由
1、路由参数
Vue路由参数是Vue Router中用于在路由跳转时传递数据的一种方式。这些参数可以是查询参数（query）或动态路由参数（params），它们允许在路由的URL中携带额外的信息，并在目标组件中访问这些信息。
1.1 查询参数（Query Parameters）
查询参数通过URL的查询字符串（即URL中?后面的部分）传递。它们类似于HTTP GET请求中的查询参数，可以在URL中直接看到。
1.1.1传递查询参数
在<router-link>组件中，可以通过to属性的对象形式传递查询参数。
<router-link :to="{ path: '/user', query: { id: 123, name: 'John' }}">User</router-link>1.1.2接收查询参数
可以使用this.$router.query来接收查询参数
export default { mounted() { console.log(this.$route.query.id); // 输出: 123 console.log(this.$route.query.name); // 输出: John }
}1.2. 动态路由参数（Dynamic Route Parameters）
动态路由参数通过URL中的动态片段（即路径中的:参数名部分）传递。它们通常用于构建具有不同参数的URL，而不是将所有信息都放在查询字符串中。
1.2.1定义动态路由
const routes = [ { path: '/user/:id', component: User }
];1.2.2传递动态路由参数
在<router-link>组件中，可以直接在to属性的路径中指定动态路由参数的值。
<router-link :to="'/user/' + userId">User</router-link>1.2.3接收动态路由参数
在目标组件中，可以通过$route.params对象访问这些动态路由参数.但在大多数情况下，对于直接定义的动态路由参数，我们直接使用$route.params即可。然而，对于命名路由和子路由中的params参数，它们实际上是通过props属性传递给子组件的，而不是直接通过$route.params访问。
2、动态路由
把匹配到的所有路由，全部映射到同一个组件
2.1、动态路由
使用路由表配置传递参数
使用动态路由，首先需要在index.js中定义配置动态路由参数
path字段中配置动态路径参数，以冒号开头
{path: '/detail/:id',component: () => import('@/components/listchild.vue')},这里的“ component: () => import('@/components/listchild.vue')”采用按需引入的方式
在路由链接处使用:to的动态绑定形式在<router-link>中将参数绑定，当路由被激活使用时，将对应的参数传递到目标组件
<router-link :to='"/detail/"+item.id'>路由链接</router-link>在目标组件中可以使用"console.log(this.$route.params.id)"打印出对应传递的参数
2.2动态路由的传参方式
动态路由的传参有两种，一种是params传参，一种是query传参，接下来我们用一个例子来仔细探讨以下这两种方式
首先我们先创建一个商品展示的组件命名为list.vue，我们使用这个组件展示商品，再创建一个组件命名为listchild.vue，这个组件我们用来展示商品详细信息，之后的操作则是将所有的商品路由映射到listchild组件上实现动态路由传参
2.2.1params传参
list.vue结构：
<template><div class="list-content"><ul class="list"><li class="item" v-for="item in proList" :key="item.id"><!-- 通过params传递参数 --><router-link :to='{name:"detail" , params:{id:item.id}}'><img :src="item.img"><span>{{ item.title }}---{{ item.price }}</span></router-link></li></ul></div>
</template>在list.vue中使用:to以对象方式动态链接路由
index.js结构
//通过params传递参数{path: '/detail/:id',name: 'detail',//命名路由component: () => import('@/components/listchild.vue')},使用命名路由识别定义的路由，传递参数
注意：
在路由表中的目标路由的path路径中如果没有配置id，当我们刷新详情页面的时候，传递的参数会丢失，因此我们需要在使用的时候在路由表的目标路径中的path字段添加:id
具体参数是否传递，我们可以在目标组件中使用console.log(this.$route.params.id)来接收打印查看，具体代码实现：
export default{created(){console.log(this.$route.params.id)}
}
</script>2.2.2query传参
index.js
// query传参{path: '/detail',name: 'detail',//命名路由component: () => import('@/components/listchild.vue')},list.vue
<!-- query传递参数 --><router-link :to='{path:"/detail" , query:{id:item.id}}'><img :src="item.img"><span>{{ item.title }}---{{ item.price }}</span></router-link>同样的，参数是否传递需要使用console.log(this.$route.query.id)
<script >
export default{
created(){console.log(this.$route.query.id)
}
}
</script>2.3小结【params和query的区别】
1）params只能配合name使用，否则参数会丢失，解决参数丢失的方法：在路由表中的path中配置动态id即可，query配合path和name都可以使用
2）params在地址栏中不显示参数信息，当然不显示的前提是没有在path中配置动态id，query显示传递的参数信息
3）接收参数的方式不同：params使用this.$route.params接收，query使用this.$route.query接收
2.4$route和$router的区别
$route:每个组件的$route是不同的，包含的是当前路由的相关配置信息
$router是整个应用的路由配置信息的集合，整个应用是由一个
五、props解耦
在Vue中，
props是父组件向子组件传递数据的一种方式。有时候，直接在子组件中使用this.$props.someProp来访问这些属性可能会让模板或计算属性变得冗长且难以阅读。为了简化这个过程，Vue提供了一种称为“props解耦”（props destructuring）的技术，它允许你将props解构到组件的局部作用域中。
使用props解耦，你可以直接在组件的方法、计算属性或模板中使用props的值，而不需要每次都通过this.$props来访问它们。
接下来我们来看三种模式【布尔模式 / 对象模式 / 函数模式】
1、布尔模式
在路由配置表中设置props属性为true，此时将会默认将$route.params数据传给组件，组件需要通过自身的props属性取出params中的属性，以props的形式传递给目标组件
路由表配置：
{path: '/detail/:id',name: 'detail',//命名路由props: true,component: () => import('@/components/listchild.vue')},路由链接：
<router-link :to='{name:"detail" , params:{id:item.id}}'><img :src="item.img"><span>{{ item.title }}---{{ item.price }}</span></router-link>目标组件：
props:['id'],使用props接收，可以使用插值表达式释放参数的值
注意：props如果是true时只能和params配合使用，query无法完成传递
2、对象模式
如果props是一个对象，其下所有属性均会被传入组件，需要注意的是当前props必须是静态的【固定的信息】
路由表配置：
{path: '/detail/:id',name: 'detail',//命名路由props: {id: 1,username: '张三'},component: () => import('@/components/listchild.vue')},路由链接：
<router-link :to='{name:"detail" , params:{id:item.id}}'><img :src="item.img"><span>{{ item.title }}---{{ item.price }}</span></router-link>目标组件接收：
props:['id','username'],注意，只能传递静态数据
3、函数模式
props也可以是一个函数的返回值，
路由配置
//函数模式{path: '/detail/:id?/:title?',name: 'detail',//命名路由props(route) {return {id: route.params.id,title: route.params.title}},component: () => import('@/components/listchild.vue')},路由链接
<router-link :to='{name:"detail" , params:{id:item.id,title:item.title}}'><img :src="item.img"><span>{{ item.title }}---{{ item.price }}</span></router-link>目标组件
props:['id','title'],六、结语
今天的分享就到这里了，如果您觉得这篇文章还不错，请点赞、分享给更多的朋友吧！同时，也欢迎关注我的博客，获取更多精彩内容。
