博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
我的 Vue.js 学习日记 (十三) - vue-router
阅读量:6095 次
发布时间:2019-06-20

本文共 3227 字,大约阅读时间需要 10 分钟。

上节回顾

一个月的期限马上要到了,真是弹指一瞬间的匆匆...

上节主要记录了我从子组件修改父组件传递过来的prop值得一个思路过程
由于近期对于权限控制方面有一定的需求,所以去了解了一下vuexvue-router,那么今天就来总结一下关于vue-router的一些已有的认识,并且有时间的话进行一下系统的学习

本节目标

总结vue-router基于vue-cli项目的安装及简单使用

1.安装

npm install vue-router

2.目录

通常来说路由都存放在一个单独的.js文件,路径如下:

src - router - index.js

我的index.js现有代码如下:

import Vue from 'vue'import Router from 'vue-router'import Frame from '@/components/frame'import StudentList from '@/components/student/student-list'import StudentAdd from '@/components/student/student-add'import DemoSlot from '@/components/demo/demo-slot'import DemoPage from '@/components/demo/demo-page'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      component: Frame,      children: [        {          path: '/student/list',          component: StudentList        },        {          path: '/student/add',          component: StudentAdd        },        {          path: '/demo/slot',          component: DemoSlot        },        {          path: '/demo/page',          component: DemoPage        }      ]    }  ]})

3.引入

路由创建好了,那么接着就应该将整理好的路由与项目关联起来啦

只有两个操作点:

  1. import进来
  2. 挂在vue实例上

我们打开src - main.js

import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import App from './App'import router from './router'Vue.use(ElementUI)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: '
'})

4.使用

现在,凡是在路由组件中配置过的路由记录,现在都可以被导航啦

注:没有配置过的路由记录是不可以被导航的

4-1.路由基础用法:

1.<router-link to="/student/list" tag="div">学员列表</router-link>

意思是通过路由导航到/student/list记录点,to设置目标路由记录点,tag="div"表示router-link最终会呈现为一个div元素

通过向根实例传入router实例,router会注入到每个组件中,可以通过:this.$router在各个组件当中获取router的实例

2.

例如:

this.$router.push()进行编程式导航

this.$router.go()前进后退等

5.hash与history

简单来理解的话:

hash:url中带有#,并且只修改#之后的url,默认情况下vue-router是hash模式

history:url中不带#,使用history.pushState完成跳转并且需要后台配合使用,使用history模式需要显式指定

不过两者的跳转都不会使页面重新加载

6.守卫

6.1.种类

守卫总共分为:全局守卫路由守卫组件守卫三种

意思就是分三个区域,全局区域路由区域组件区域,很明显是作用域不同

全局守卫分3个:前置beforeEach后置afterEach解析beforeResolve

路由独享守卫:进入前beforeEnter

组件守卫:进入(组件对应)路由前beforeRouteEnter路由改变前(组件复用时)beforeRouteUpdate 离开(组件对应)路由前beforeRouteLeave

守卫执行顺序:

附一张我自己的理解:

图片描述

注:带有next的守卫一定要调用next()

6.2.应用场景

前些天在做权限时通过查找资料,最终发现通过全局前置守卫,可以实现一些权限控制的功能,当然他并不能独立完成需要配合vuex来使用

7.meta 路由元数据

const router = new VueRouter({  routes: [    {      path: '/foo',      component: Foo,      children: [        {          path: 'bar',          component: Bar,          // a meta field          meta: { requiresAuth: true }        }      ]    }  ]})

注:meta很有用的,例如我们可以通过为路由记录添加meta信息来代表该路由所代表的功能模块代码,在addRoutes时判断是否有权限加载此路由记录

8.路由懒加载

由于我们使用的是SPA的方式开发网页,那么有一个庞大的js文件是可想而知的

路由懒加载即是为了降低不必要的开销,在路由被访问时才真正的去加载它

用法:

const Foo = () => import('./Foo.vue')

只修改了引入方式,使用方式并没有改变

const router = new VueRouter({  routes: [    { path: '/foo', component: Foo }  ]})

9.addRoutes 动态添加路由

用法:

假设我们有如下路由:

var router = new Router({  routes: [    {      path: '/',      component: Frame,      ]    }  ]})

并且有如下数组:

var routes = [{      path: '/index',      name: '首页',      component: 组件,      children: [{        path: 'page1',        component: 组件1      }, {        path: 'page2',        component: 组件2      }]

那么可以:

router.addRoutes(routes)

之后就可以成功的导航到新增的三个路由记录啦

转载地址:http://zjwza.baihongyu.com/

你可能感兴趣的文章
Linux的50个基本命令
查看>>
Objective-C中创建单例方法的步骤
查看>>
[转]无法安装MVC3,一直卡在vs10-kb2483190
查看>>
Codeforces 520B:Two Buttons(思维,好题)
查看>>
web框架-(二)Django基础
查看>>
Jenkins持续集成环境部署
查看>>
emoji等表情符号存mysql的方法
查看>>
Excel到R中的日期转换
查看>>
检查磁盘利用率并且定期发送告警邮件
查看>>
MWeb 1.4 新功能介绍二:静态博客功能增强
查看>>
linux文本模式和文本替换功能
查看>>
Windows SFTP 的安装
查看>>
摄像机与绕任意轴旋转
查看>>
rsync 服务器配置过程
查看>>
预处理、const与sizeof相关面试题
查看>>
爬虫豆瓣top250项目-开发文档
查看>>
Elasticsearch增删改查
查看>>
oracle归档日志增长过快处理方法
查看>>
有趣的数学书籍
查看>>
teamviewer 卸载干净
查看>>