路由
小涛涛啊!
这个作者很懒,什么都没留下…
展开
-
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 · 125 阅读 · 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 · 693 阅读 · 0 评论 -
vue 重定向与别名
vue-router重定向有的时候,我们会根据某种需求对用户请求的页面进行重新定位案例现有一小说网站,提供了 男生频道 和 女生频道 的两个入口,用户首次进入页面的时候,会出现选择,并记住用户的选择,以后该用户进入网站直接根据记录的选择进入对应的频道组件// BookChoose.vue<template> <div> <router-link :to="{name: 'book-boy'}">男生</router-link&g原创 2020-10-16 16:09:40 · 179 阅读 · 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 · 156 阅读 · 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 · 400 阅读 · 0 评论 -
vue 路由守卫
vue-router路由守卫当导航发生改变的时候,vue-router 会在多个不同的地方调用指定的函数,也就是与路由有关的生命周期函数,也称为:路由守卫组件内守卫路由独享守卫全局守卫组件内守卫定义在组件内的与路由有关的生命周期函数(守卫)beforeRouteEnterbeforeRouteUpdatebeforeRouteLeavebeforeRouteEnter当路由解析完成,并中指定的组件渲染之前(组件 beforeCreate 之前),不能这里通过 this 访问原创 2020-10-16 16:04:45 · 129 阅读 · 0 评论