vue-router
文章平均质量分 50
kjs--
好的坏的都是风景
展开
-
导航前置守卫
导航前置守卫vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航,说白了,就是控制路由到底能不能跳转,应该如何跳转全局前置守卫会拦截每个路由规则,从而对每个路由进行访问权限的控制全局的前置守卫是路由跳转前进行触发的我们可以使用 router.beforeEach 注册一个全局前置守卫router.beforeEach((to, from, next) => { // ${to and from are Route Object,next() must be c原创 2021-04-16 21:19:59 · 210 阅读 · 0 评论 -
命名路由 路由重定向 路由高亮class类
一.命名路由概念通过name 属性为路由规则定义名称的方式,叫做命名路由。注意:命名路由的 name 值不能重复,必须保证唯一性{ name: 'about', //命名路由 path: '/about/:id', component: about,}使用命名路由实现编程式导航调用 push 函数期间指定一个配置对象,name是要跳转到的路由规则、params 是携带的路由参数this.$router.push({ name: "index" });注意:如果使原创 2021-04-16 21:14:19 · 649 阅读 · 0 评论 -
编程式导航 声明式导航 push()的参数问题 go()使用方式
编程式导航概念所谓编程式导航是指通过调用 API 实现导航(路由)跳转,之前使用的router-link称为声明式导航通过this.$router.push可以实现编程式导航this.$router.push()的参数:可以是一个字符串路径也可以是描述地址的对象同样的规则也适用于 router-link 组件的 to属性router-link本质上也是通过$router.push来实现的(内部调用了push方法)细节:如果提供了path,params 会被忽略,这个时候要使原创 2021-04-16 21:04:16 · 234 阅读 · 0 评论 -
嵌套路由
嵌套路由需求场景实际开发中的应用界面,通常由多层嵌套的组件组合而成嵌套结构要对应着嵌套路由(通过路由实现组件的嵌套展示,叫做嵌套路由)① 点击/user路由链接显示user模板内容② 模板内容中又有子级路由(/profile /posts)链接③ 点击子级路由链接显示子级模板内容添加嵌套路由配置使用children可以添加嵌套路由的配置需要为谁添加嵌套路由,就是这个父级路由中添加children配置children里面的路由配置和根路由配置类似注意,以/开头的原创 2021-04-16 20:54:59 · 92 阅读 · 0 评论 -
动态路由匹配 (多个路由映射一个组件) 参数设置 参数获取
动态路由匹配动态路由的必要性我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。如果我们一个一个定义路由规则的话也是可以的但是路由规则的复用性就会变得很差例如,我们有一个 User组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:const User = { template: '<div>User</div>'}con原创 2021-04-16 20:45:19 · 1231 阅读 · 0 评论 -
前端路由的概念与原理
一. 前端路由的概念与原理回顾后端路由后端路由指的是:请求方式、请求地址与 function 处理函数之间的对应关系。在 node.js 中,express 路由的基本用法如下:const express = require('express')const router = express.Router()router.get('/cates', (req, res) => { conn.query(`SELECT * FROM categories`, (err, result原创 2021-04-15 16:19:20 · 177 阅读 · 0 评论 -
vue中的路由
vue中的路由一.vue-router介绍Vue Router是 Vue.js 官方的路由管理器它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌,说白了,就是配合vue.js一起来实现单页应用开发的,它主要用来实现项目中的路由管理我们需要做的是:将组件 (components)映射到路由 (routes),然后告诉Vue Router在哪里渲染它们vue-router目前有 3.x 的版本和 4.x 的版本。其中:vue-router 3.x只能结合 vue2 进行使用原创 2021-04-15 17:28:31 · 134 阅读 · 0 评论 -
vue中 延迟加载组件
vue中 延迟加载(懒加载)原创 2021-04-15 17:48:50 · 2651 阅读 · 0 评论