vue路由

目录概述需求： 设计思路实现思路分析1.路由2.使用3.注意点4.路由的query参数5.路由的params参数 <router-link>的replace属性性能参数测试： 参考资料和推荐阅读

Survive by day and develop by night.
talk for import biz , show your perfect code,full busy，skip hardness,make a better result,wait for change,challenge Survive.
happy for hardess to solve denpendies.

目录

概述

vue路由的是一个非常常见的需求。

需求：

设计思路

实现思路分析

1.路由

一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
前端路由：key是路径，value是组件。

2.使用

npm i vue-router。

在这里//引入Vueimport Vue from 'vue'//引入Appimport App from './App.vue'//引入VueRouterimport VueRouter from 'vue-router'//引入路由器import router from './router'   //步骤3里 //关闭Vue的生产提示Vue.config.productionTip = false//应用插件Vue.use(VueRouter) //创建vmnew Vue({el:'#app',render: h => h(App),router:router})

//引入VueRouterimport VueRouter from 'vue-router'//引入Luyou 组件import About from '../components/About'import Home from '../components/Home' //创建router实例对象，去管理一组一组的路由规则const router = new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]}) //暴露routerexport default router

3.注意点

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
每个组件都有自己的 r o u t e 属 性 ， 里 面 存 储 着 自 己 的 路 由 信 息 。 整 个 应 用 只 有 一 个 r o u t e r ， 可 以 通 过 组 件 的 route属性，里面存储着自己的路由信息。 整个应用只有一个router，可以通过组件的 route属性，里面存储着自己的路由信息。整个应用只有一个router，可以通过组件的router属性获取到。

4.路由的query参数

5.路由的params参数

配置路由，声明接收params参数

的replace属性

控制路由跳转时浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push操作浏览器历史记录的模式

性能参数测试：

## 编程式路由导航

// $router的两个APIthis.$router.push({        name: "路由命名",        params: {             参数1: xxx,              参数2: xxx             },      });

this.$router.replace({        name: "路由命名",        params: {             参数1: xxx,              参数2: xxx             },      });

参考资料和推荐阅读

[1]. https://blog.csdn.net/qq_42002794/article/details/121476068
[2]. http://www.ay1.cc/article/7446.html

欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！~