Maison > Article > interface Web > Un article qui explique le routage Vue en détail : vue-router
Cet article vous donnera une explication détaillée de VueVue-Router dans FamilyMart et découvrira les connaissances pertinentes en matière de routage. J'espère qu'il sera utile à tout le monde !
Le concept de routage est apparu dans le génie logiciel et a été implémenté pour la première fois dans le routage back-end La raison en est que le développement du Web est principalement passé par les éléments suivants. étapes :
Avantages : Propice à l'optimisation du référencement
Inconvénients : La page entière est maintenue par le personnel back-end, le code HTML et la logique correspondante des données seront mélangés, et l'écriture et la maintenance sont très pauvre.2. Séparation front-end et back-end
Séparation du front-end et du back-end :
Le back-end est uniquement responsable de la fourniture de l'API, le front-end obtient les données via Ajax et restitue les données sur la page via JavaScriptLe back- la fin se concentre sur les données, et le front-end se concentre sur l'interaction et la visualisation
Une couche de routage front-end est ajoutée en fonction de la séparation du front-end et du back-end -end, Le front-end maintient un ensemble de règles de routage
npm install vue-routerÉtapes :
Tutoriel vidéo Vue
]Créez des objets de routage via createRouter, Et passez en mode routes et historique
Utilisez l'application pour enregistrer l'objet route (utiliser la méthode)
import { createRouter, createWebHashHistory } from "vue-router" import Home from "../views/Home.vue" import About from "../views/About.vue" // 创建一个路由:映射关系 const router = new createRouter({ history: createWebHashHistory(), routes: [ { path: "/", redirect: "/home" }, { path: "/home", component: Home }, { path: "/about", component: About } ] }) export default router
Supplémentaire : autres attributs de l'itinéraire
attribut name : enregistre le nom unique de l'itinérairerouter-link In en fait, de nombreux attributs peuvent être configurés :attribut méta : données personnalisées
router-link (supplémentaire)
attribut replace : si l'attribut replace est défini, lorsque vous cliquez dessus, router.replace() sera appelé à la place du routeur. pousser(). Généralement, l'attribut replace n'est pas utilisé et l'expérience utilisateur n'est pas très bonne.
Par exemple : il existe un composant Utilisateur, qui doit s'afficher pour tous les utilisateurs, mais l'ID de l'utilisateur est différent. Nous pouvons le faire en utilisant un champ dynamique dans le chemin, que nous appelons paramètre de chemin. Ensuite, implémentez le saut dans .
获取动态路由的值(例如上面例子中 用户id 123),在template中,直接通过 $route.params获取值。
对于没有匹配到相应的路由,我们可以给用户匹配一个固定的页面。通过 $route.params.pathMatch获取到传入的参数
组件的本身也有组件需要内部切换,这个时候就可以采用嵌套路由,在第一层路由中也使用router-view来占位之后需要渲染的组件。
{ path: "/home", component: () => import("../views/Home.vue"), children: [ { path: "/show", component: () => import("../views/component/show.vue") }, { path: "/detail", component: () => import("../views/component/detail.vue") } ] },
通过代码来控制页面的跳转
栗子:点击一个按钮跳转页面
通过query的方式来传递参数,在界面中通过 $route.query 来获取参数。
使用push的特点是压入一个新的页面,那么在用户点击返回时,上一个页面还可以回退,但是如果我们希望当前页面是一个替换 操作,那么可以使用replace。这个时候已经不能回退了。
router 的 go 方法(指定向前(向后)跳转几步)
router 的back 方法 (回溯历史,向后一步)
router 的forward 方法(历史中前进,向前一步)
场景:根据用户的不同权限,注册不同的路由
补充:路由的其他方法
删除路由有以下三种方式:
router.hasRoute():检查路由是否存在。
router.getRoutes():获取一个包含所有路由记录的数组。
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航
全局的前置守卫==beforeEach
==是在导航触发时会被回调的,它有两个参数:
返回值:
场景:只有登录了的用户才能看到的页面
Vue还提供了很多的其他守卫函数,目的都是在某一个时刻给予回调,可以更好的控制程序的流程或者功能
[导航守卫](导航守卫 | Vue Router (vuejs.org))
流程:
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
在路由配置里调用 beforeEnter。 解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
Appelez le garde global beforeResolve (2,5+).
Navigation confirmée.
Appelez le global afterEach hook.
Déclenchez la mise à jour du DOM.
Appelez la fonction de rappel passée à next dans la garde beforeRouteEnter, et l'instance de composant créée sera transmise en tant que paramètre de la fonction de rappel.
Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!