Vue路由学习心得

GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~

一、介绍

   1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击login按钮时,页面就显示login的内容,也可以说是一种映射,所有在页面上有两个部分,一个是点击部分,一个是显示部分。

2.路由中有三个基本的概念,route,routes,router。

1.route:它是一个路由,是一个单数,点击Home按钮->Home内容

2.routes:它是一组路由,把每一条路由组合起来,串接起来形成一个数组;[{home按钮=>home内容},{about按钮=>about内容}]

3.router:它是一个机制,相当于一个管理者,来管理所有路由;

4.客户端中的路由原理:实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候,about 中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.

二、Vue路由绑定

1.最常用的路由绑定方式
    <router-link to="/admin" class="nav-link">管理</router-link>
2.对路由name进行绑定
    {path:‘/about‘,name:‘aboutlink‘,redirect:‘/about/contact‘,component:About}
    <router-link :to="{name:‘aboutlink‘}" class="nav-link">关于我们</router-link>
3.对数据进行绑定
    data(){
        return{
            menu:‘/menu‘,
        }
    }
    <router-link :to="menu" class="nav-link">菜单</router-link>

三、Vue路由跳转

1.跳到上一次浏览页面
    this.$router.go(-1)
2.跳到指定位置
    this.$router.replace(‘/name‘)
3.跳到指定路由名字下
    this.$router.replace({name:‘aboutlink‘})
4.
    this.$router.push(‘/name‘)
    this.$router.push({name:‘aboutlink‘})

//{name:‘aboutlink‘}是路由配置是的name名称

四、路由重定向与错误时跳转

1.路由重定向
    redirect:‘/home‘
2.错误路径时跳转
    {path:‘*‘,redirect:‘/‘}

五、路由守卫

Vue的路由守卫分为三种:
    1.全局守卫
        router.beforeEach((to,from,next)=>{})  //前置守卫
        router.afterEach((to,from)=>{})
    2.组件内守卫
        beforeRouterEnter:(to,from,next)=>{}
        beforeRouterLeave:(to,from,next)=>{}
    3.路由独享守卫
        beforeEnter:(to,from,next)=>{}

    具体怎么使用的就不一一介绍了,也是很简单的.

  

原文地址:https://www.cnblogs.com/alongup/p/9065208.html

时间: 2024-11-08 15:55:07

Vue路由学习心得的相关文章

vue生命周期学习心得(下)

此文接vue生命周期学习心得(上)http://www.cnblogs.com/pengshadouble/p/7488330.html通过vue生命周期学习心得(上),大至了解了vue生命周期的8个阶段及相关钩子函数触发的时间点,这章我们通过简单的代码看一下具体的运行结果: <template> <div id="container"> <headers></headers> <router-view></router

Java开发学习心得(二):Mybatis和Url路由

Java开发学习心得(二):Mybatis和Url路由 序号接上一篇Java开发学习心得(一):SSM环境搭建 1.3 Mybatis MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .MyBatis是一个基于Java的持久层框架.iBATIS提供的持久层框架包括SQL Maps和Data Access Objects(DAO)MyBatis 消除了几

初印象至Vue路由

初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路由使用超链接 以下内容来自官网,js使用ES6 如何在vue项目中使用vue-router HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="htt

Vue.js—组件快速入门以及Vue路由实例应用

上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js的组件,组件其实就是页面组成的一部分,它是一个具有独立的逻辑和功能或页面,组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树,如下图: 接下来我们就仔细讲讲组件的使用吧. 1 全局组件 以下就是我们注册

【VUE】VUE相关学习和知识备份

一.学习资料参考 1.1.Vue.js 官网:Vue.js https://cn.vuejs.org/ 官方文档:介绍 - Vue.js https://cn.vuejs.org/v2/guide/ API 参考:API - Vue.js https://cn.vuejs.org/v2/api/ 附:vue.js(1.0版本) https://v1-cn.vuejs.org/ (教程和API自行寻找) 1.2.Vue Router 学习和理解: 官方文档:介绍 | Vue Router http

SpringCloud学习心得—1.3—Eureka与REST API

SpringCloud学习心得—1.3—Eureka与REST API Eureka的REST API接口 API的基本访问 Eureka REST APIEureka 作为注册中心,其本质是存储了每个客户端的注册信息,Ribbon 在转发的时候会获取注册中心的服务列表,然后根据对应的路由规则来选择一个服务给 Feign 来进行调用. 如果我们不是Spring Cloud 技术选型,也想用 Eureka,可以吗?完全可以. 如果不是 Spring Cloud 技术栈,推荐用 Zookeeper,

CCNA的RIP路由学习

rip(routing infomation protocol,路由信息协议) ,是一个纯粹的距离矢量路由选择协议,RIP每隔30s就将自己完整的路由选择表从所有激活的接口上送出.RIP只将跳计数作为判断到达远程网络最佳路径的依据,并且在默认情况下允许最大的跳计数为15.也就是说,16就被认为不可达的. RIP版本1只使用有类的路由选择,即网络中的所有设备都必须使用相同的子网掩码.这是因为RIP版本1在发送更新数据中不携带子网掩码信息.RIP版本2提供了前缀路由选择信息,并可以在路由更新中传送子

Linux系统理解以及Linux系统学习心得

原创作品转载请注明出处  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 作者:严哲璟 说一下我对Linux系统的理解 1.加载Linux内核准备:在加载基本输入输出模块(BIOS)之后,从磁盘的引导扇区读入操作系统的代码文件块到内存中,之后开始整个系统的初始化. 2.main.c的start_kernel函数是整个操作系统的入口,这也与Linux是基于C语言的特性相符,start_kernel具体做的动作很多

我的MYSQL学习心得(八)

我的MYSQL学习心得(八) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL学习心得(五) 我的MYSQL学习心得(六) 我的MYSQL学习心得(七) 这一篇<我的MYSQL学习心得(七)>将会讲解MYSQL的插入.更新和删除语句 同样的,只会讲解跟SQLSERVER不同的地方 插入 将多行查询结果插入到表中 语法 INSERT INTO table_name1(column_list1) SELECT (