![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
路由
小涛涛啊!
这个作者很懒,什么都没留下…
展开
-
vue 路由懒加载
vue-router 路由懒加载 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了 import Vue from 'vue' import Router from 'vue-router' import NProgress from 'nprogress' import 'nprogress/nprogress.css' // import Home from './views/原创 2020-10-18 18:44:11 · 117 阅读 · 0 评论 -
vue 路由元信息
vue-router 路由元信息 定义路由的时候可以配置 meta 字段 通过 meta 定义要验证的路由 const router = new Router({ routes: [ { path: '/user', component: User, children: [ { path: '', name: 'user', component: Profile,原创 2020-10-16 16:11:06 · 660 阅读 · 0 评论 -
vue 重定向与别名
vue-router 重定向 有的时候,我们会根据某种需求对用户请求的页面进行重新定位 案例 现有一小说网站,提供了 男生频道 和 女生频道 的两个入口,用户首次进入页面的时候,会出现选择,并记住用户的选择,以后该用户进入网站直接根据记录的选择进入对应的频道 组件 // BookChoose.vue <template> <div> <router-link :to="{name: 'book-boy'}">男生</router-link&g原创 2020-10-16 16:09:40 · 164 阅读 · 0 评论 -
vue动态路由
vue-router 动态路由 有的时候,我们需要把满足某种规则的路由全部匹配到同一个组件,比如不同的商品的 url /item/1 /item/2 /item/3 ... 我们不可能为每一个商品都定义一个独立的组件,而是把它们都映射到同一个组件,同时 url 后面的部分为动态变化的部分,我们会在设计路由的时候进行特殊的处理 ... { path: '/item/:itemId', name: 'item', component: Item } ... 其中 :itemId 表示匹配的 ur原创 2020-10-16 15:59:55 · 136 阅读 · 0 评论 -
vue 嵌套路由
vue-router 嵌套路由 一些比较复杂的应用会有多层嵌套的路由和组件组成 添加路由与子路由 ... import User from './views/User.vue' import Profile from './views/User/Profile' import Cart from './views/User/Cart.vue' ... ... { path: '/user', component: User, children: [ { path: '', na原创 2020-10-16 16:06:30 · 384 阅读 · 0 评论 -
vue 路由守卫
vue-router 路由守卫 当导航发生改变的时候,vue-router 会在多个不同的地方调用指定的函数,也就是与路由有关的生命周期函数,也称为:路由守卫 组件内守卫 路由独享守卫 全局守卫 组件内守卫 定义在组件内的与路由有关的生命周期函数(守卫) beforeRouteEnter beforeRouteUpdate beforeRouteLeave beforeRouteEnter 当路由解析完成,并中指定的组件渲染之前(组件 beforeCreate 之前),不能这里通过 this 访问原创 2020-10-16 16:04:45 · 113 阅读 · 0 评论