Vue路由（详解）

目录

路由原理

路由到底有什么作用？

路由安装和使用（vue2）

路由跳转

跳转实例：

路由的传值和取值

 传值实例：

查询参和路由参的区别：

嵌套路由

嵌套实例：

路由守卫

守卫实例：

路由原理

路由是Vue中的一个重要的插件。

Vue是单页面应用就一个HTML页面，但是我们要实现页面的跳转效果，那么我就需要使用路由。

单页面的跳转是什么呢？实际上就是局部改变，其实还是一个单页面，只是看起来像跳转的样子。

单页应用的路由模式有两种

1、哈希模式（利用hashchange 事件监听 url的hash 的改变）

2、history模式（使用此模式需要后台配合把接口都打到我们打包后的index.html上）

路由到底有什么作用？

下图淘宝例子：底部红色框中的按钮点击的话，绿色框中的内容会发生改变，实现单页面应用

路由安装和使用（vue2）

路由下载地址上个博客写过，没下的可以去看看。

导入路由插件：

<script src="../js/vue2.7.js"></script><!--vue文件-->
<script src="../js/vue-router.js"></script><!--路由文件-->

安装路由插件到Vue中：

<script>
    //安装路由，前提要导入路由js
    Vue.use(VueRouter)
</script>

创建VueRouter对象：

var Login = Vue.extends({
    template:`
        <div>
        我是登录页面
        </div>
    `
});
// 创建VueRouter对象,并配置路由
var myRouter = new VueRouter({
    // 配置路由
    routes:[
        // 指定路由链接、路由名称、路由页面（组件）
        {path:'/login',name:'login',component:Login}
    ]
});

使用路由：

var app= new Vue({
    el:'#app',
    // 引入到vue 实例中，并在模板中使用<router-view>
    router:myRouter,
    template:`
        <div>
        	头部
        	<router-view></router-view><!--路由出口-->
        	尾部
        </div>
    `
})

路由跳转

路由的跳转有两种方式：

  • 使用<router-link>标签

    <router-link to='/login'></router-link>

  • 编程式路由，使用js

    this.$router.push({path:'/login'});
this.$router.replace({path:'/login'});

说明：

  1. this.$router.push(); 会向history中添加记录
  2. this.$router.replace();不会向history中添加记录。
  3. this.$router.go(-1)常用来做返回上一个地址。

push和replace的区别就是在跳转后，后退或前进能不能使用 

路由中的对象：

  1. this.$route 路由信息对象，只读。
  2. this.$router 路由操作对象，只写。

跳转实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        头部
        <router-link to="/login">登录</router-link><!--登录的标签方式-->
        <router-link to="/person">个人</router-link><!--个人的标签方式-->
        <button @click="toLogin">登录按钮</button><!--登录的点击事件方式-->
        <button @click="toPerson">个人按钮</button><!--个人的点击事件方式-->
        <!--下面是路由出口-->
        <router-view></router-view>
        尾部
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    //安装路由，前提要导入路由js
    Vue.use(VueRouter)
    //创建一个登录子组件
    var login={
        template:`
            <div>
                登陆页面
            </div>
        `,
    }
    //创建一个个人子组件
    var person={
        template:`
            <div>
                个人页面
            </div>
        `,
    }
    //创建路由配置实例，主要实现 路由和子组件之间的映射
    var myrouter=new VueRouter({
        routes: [
            {path:'/login',name:'login',component:login},
            {path:'/person',name:'person',component:person}
        ]
    })

    let app=new Vue({
        el:"#app",
        router:myrouter,
        methods: {
            toLogin(){
                this.$router.push({
                    path:'/login'
                })
            },
            toPerson(){
                this.$router.replace({
                    path:'/person'
                })
            },
        },
    })
</script>
</html>

路由的传值和取值

查询参

配置。查询参可以和path属性匹配，也可以和name属性匹配。

<router-link :to="{path:'/login',query:{id:queryid}}"></router-link>

或者

<router-link :to="{name:'login',query:{id:queryid}}"></router-link>

或者

this.$router.push({path:'/login',query:{id:this.queryid}});

取参

// 此代码可以写到子组件的钩子函数中
this.$route.query.id

路由参

配置路由规则

var router = new VueRouter({
    routers:[
        // 需要在配置路由规则时，使用冒号指定参数
        {name:'login',path:'/login/:id',component:LoginVue}
    ]
});

配置。意：在这里path和params两个参数不能同时使用，

路由参配置的时候要使用name，因为path会根据参数的不同会改变。

<router-link :to="{name:'login',params:{id:paramId}}"></router-link>

或者

this.$router.push({name:'login',params:{id:this.paramId}});

取参

// 此代码可以写到子组件的钩子函数中
this.$route.params.id

 传值实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        头部
        <router-link :to="{path:'/login',query:{id:loginId}}">登录query-link方式</router-link>
        <button @click="toLogin">登录query-按钮方式</button>
        <router-link :to="{name:'person',params:{id:personId}}">个人params-link方式</router-link>
        <button @click="toPerson">个人params-按钮方式</button>
        <br>
        <router-view></router-view><!--路由出口-->
        尾部
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    //安装路由，前提要导入路由js
    Vue.use(VueRouter)

    var login={
        template:`
            <div>
                登陆页面
            </div>
        `,
        mounted() {
            console.log(this.$route.query.id);
        },
    }
    //创建一个个人子组件
    var person={
        template:`
            <div>
                个人页面
            </div>
        `,
        mounted() {
            console.log(this.$route.params.id);
        },
    }
    //创建路由配置实例，主要实现 路由和子组件之间的映射
    var myrouter=new VueRouter({
        routes: [
            {path:'/login',name:'login',component:login},
            {path:'/person/:id',name:'person',component:person}
        ]
    })
    let app=new Vue({
        el:"#app",
        router:myrouter,
        data() {
            return {
                loginId:66,
                personId:33
            }
        },
        methods: {
            toLogin(){
                this.$router.push({
                    path:'/login',
                    query:{id:this.loginId}
                })
            },
            toPerson(){
                this.$router.push({
                    name:'person',
                    params:{id:this.personId}
                })
            },
        },
    })
</script>
</html>

查询参和路由参的区别：

在地址栏参数的不同

查询参：                                                路由参：

 大家会出现的问题：

相同路由，但参数不同。造成页面不刷新的问题，只需要给路由出口加一个属性就行。

<router-view :key="$route.fullPath"></router-view>

嵌套路由

路由间有层级关系。他们在模板中也有嵌套关系。

可以一次性配置多个路由。

嵌套实例：

实例里面写的都有注释方便大家理解，对于不理解的地方大家多看几遍，或许就能理解了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-view></router-view><!--路由出口-->
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    Vue.use(VueRouter);
    //导航组件
    let nav={
        template:`
        <div>
            <router-link :to="{name:'nav.index'}">首页</router-link>
            <router-link :to="{name:'nav.person'}">个人</router-link>
            <router-link :to="{name:'nav.message'}">消息</router-link>
            <router-view></router-view><!--导航组件的路由出口-->
        </div>
        `
    }
    //主页面子组件
    let index={
        template:`
            <div>主页面</div>
        `
    }
    //个人页面子组件
    let person={
        template:`
            <div>个人页面</div>
        `
    }
    //消息页面子组件
    let message={
        template:`
            <div>消息页面</div>
        `
    }

    let router=new VueRouter({
        routes:[
            {
                path:'/nav',
                name:'nav',
                component:nav,
                children:[//配置二级路由
                    {path:'',redirect:'/nav/index'},//默认显示二级路由页面链接是/nav/index的路由
                    {path:'index',name:'nav.index',component:index},
                    {path:'person',name:'nav.person',component:person},
                    {path:'message',name:'nav.message',component:message},
                ]
            },
            {
                path:'',
                redirect:'/nav'//默认显示页面链接是/nav的路由
            }
        ]
    })
    let app = new Vue({
        el:'#app',
        router,//这个地方使用的是简写根据ES6新语法，对象名和参数相同可以直接使用对象名。
    });
</script>
</html>

路由守卫

可以做登录的验证判断，购物车是否购买后跳转页面判断。

使用路由的钩子函数beforeEach实现

守卫实例：

我将路由守卫放在了刚才的嵌套路由的实例里面，作用是判断路径是否是首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-view></router-view><!--路由出口-->
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    Vue.use(VueRouter);
    //导航子组件
    let nav={
        template:`
        <div>
            <router-link :to="{name:'nav.index'}">首页</router-link>
            <router-link :to="{name:'nav.person'}">个人</router-link>
            <router-link :to="{name:'nav.message'}">消息</router-link>
            <router-view></router-view><!--导航组件中的路由出口-->
        </div>
        `
    }
    //主页面子组件
    let index={
        template:`
            <div>主页面</div>
        `
    }
    //个人页面子组件
    let person={
        template:`
            <div>个人页面</div>
        `
    }
    //消息页面子组件
    let message={
        template:`
            <div>消息页面</div>
        `
    }

    let router=new VueRouter({
        routes:[
            {
                path:'/nav',
                name:'nav',
                component:nav,
                children:[//配置二级路由
                    {path:'',redirect:'/nav/index'},//默认显示二级路由页面链接是/nav/index的路由
                    {path:'index',name:'nav.index',component:index},
                    {path:'person',name:'nav.person',component:person},
                    {path:'message',name:'nav.message',component:message},
                ]
            },
            {
                path:'',
                redirect:'/nav'//默认显示页面链接是/nav的路由
            }
        ]
    })
    let app = new Vue({
        el:'#app',
        router,//这个地方使用的是简写根据ES6新语法，对象名和参数相同可以直接使用对象名。
        mounted() {
            this.$router.beforeEach((to,from,next)=>{
                console.log(to);
                if(to.path=='/nav/index'){
                    // 跳转到目标路由
                    next();
                }else{
                    //如果路径不对的话延时两秒再进入
                    setTimeout(function(){
                        next();
                    },2000);
                }
            });
        }
    });
</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/89607.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

如何使用CSS实现一个响应式轮播图？

如何使用CSS实现一个响应式轮播图？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现响应式轮播图的示例⭐ HTML 结构⭐ CSS 样式 (styles.css)⭐ JavaScript 代码 (script.js)⭐ 实现说明⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带…
阅读更多...
EMR电子病历系统 SaaS电子病历编辑器源码 电子病历模板编辑器

EMR电子病历系统 SaaS电子病历编辑器源码 电子病历模板编辑器

EMR&#xff08;Electronic Medical Record&#xff09;指的是电子病历。它是一种基于电子文档的个人医疗记录&#xff0c;可以包括病人的病史、诊断、治疗方案、药物处方、检查报告和护理计划等信息。EMR采用计算机化的方式来存储、管理和共享这些信息&#xff0c;以便医生和医…
阅读更多...
在Linux中使用gcc/g++编译代码

在Linux中使用gcc/g++编译代码

gcc/g 1.方法速记2.具体过程2.1 预处理阶段2.2 编译阶段2.3 汇编阶段2.4链接阶段2.4.1 链接的细节 gcc和g的操作一样&#xff0c;g的方法就仅需把gcc换成g即可。 1.方法速记 直接编译语法&#xff1a;将text.c文件或者text.cpp文件直接编译成text文件。 gcc text.c -o text /…
阅读更多...
ElementUI中的日历组件加载无效的问题

ElementUI中的日历组件加载无效的问题

在ElementUI中提供了一个日历组件。在某些场景下还是比较有用的。只是在使用的时候会有些下坑&#xff0c;大家要注意下。   官网提供的信息比较简介。我们在引入到项目中使用的时候可以能会出现下面的错误提示。 Unknown custom element: <el-calendar> - did you …
阅读更多...
git通过fork-merge request实现多人协同

git通过fork-merge request实现多人协同

一、问题 对于一个项目&#xff0c;如果需要多人协同开发&#xff0c;大家都在原始仓库中进行修改提交&#xff0c;经常会发生冲突&#xff0c;而且一不小心会把别人的代码内容覆盖掉。为了避免这样的问题&#xff0c;git提供了fork-merge request这样的协同方式。 二、仓库框…
阅读更多...
【C++】—— 简述C++11新特性

【C++】—— 简述C++11新特性

序言&#xff1a; 从本期开始&#xff0c;我将会带大家学习的是关于C11 新增的相关知识&#xff01;废话不多说&#xff0c;我们直接开始今天的学习。 目录 &#xff08;一&#xff09;C11简介 &#xff08;二&#xff09;统一的列表初始化 1、&#xff5b;&#xff5d;初始…
阅读更多...
【业务功能篇74】三高微服务项目springboot-springcloud

【业务功能篇74】三高微服务项目springboot-springcloud

三高指的是&#xff1a;高性能、高并发、高可用 2.项目架构 2.1 系统架构图 整体的项目架构图如下 2.2 业务组成 整体的项目业务组成如下
阅读更多...
GB28181设备接入侧如何对接外部编码后音视频数据并实现预览播放

GB28181设备接入侧如何对接外部编码后音视频数据并实现预览播放

技术背景 我们在对接GB28181设备接入模块的时候&#xff0c;遇到这样的技术诉求&#xff0c;好多开发者期望能提供编码后&#xff08;H.264/H.265、AAC/PCMA&#xff09;数据对接&#xff0c;确保外部采集设备&#xff0c;比如无人机类似回调过来的数据&#xff0c;直接通过模…
阅读更多...
keepalived双机热备，keepalived+lvs（DR）

keepalived双机热备，keepalived+lvs（DR）

本节主要学习了keepalivedlvs的作用和配置方法主要配置调度器和web节点&#xff0c;还有keepalived的双击热备&#xff0c;主要内容有概述&#xff0c;安装&#xff0c;功能模块&#xff0c;配置双击热备&#xff0c;验证方法&#xff0c;双击热备的脑裂现象和VIP无法通信。 目…
阅读更多...
基于DolphinScheduler的调度流程梳理及落地实践

基于DolphinScheduler的调度流程梳理及落地实践

目 录 01 背景‍ 02 主流调度引擎 ‍‍‍‍‍‍‍ 03 DolphinScheduler核心概念及调度过程‍‍‍‍‍‍ 04 开发实践 01‍ 背景‍‍ 随着数据中台概念及相关技术逐渐成熟、落地&#xff0c;不断有企业将其应用到自身业务中&#xff0c;将原本分散的各系统数据进行整合、分析…
阅读更多...
贪心算法：简单而高效的优化策略

贪心算法：简单而高效的优化策略

在计算机科学中&#xff0c;贪心算法是一种简单而高效的优化策略&#xff0c;用于解决许多组合优化问题。虽然它并不适用于所有问题&#xff0c;但在一些特定情况下&#xff0c;贪心算法能够产生近似最优解&#xff0c;而且计算成本较低。在本文中&#xff0c;我们将深入探讨贪…
阅读更多...
javascript常用的东西

javascript常用的东西

JavaScript 是一门强大的编程语言&#xff0c;用于为网页添加交互性和动态性。也可以锻炼人们的逻辑思维&#xff0c;是一个非常好的东西。 一、变量和数据类型&#xff1a; 变量&#xff1a; 变量是用于存储数据值的容器。在 JavaScript 中&#xff0c;你可以使用 var、let…
阅读更多...
推荐系统在线峰会来了，冷启动、推荐工程、模型训练…你都能找到答案

推荐系统在线峰会来了，冷启动、推荐工程、模型训练…你都能找到答案

回顾推荐系统的发展历程&#xff0c;从 30 余年前的协同过滤算法起步&#xff0c;经历了深度学习的浪潮&#xff0c;到如今热火朝天的大模型&#xff0c;推荐系统一次又一次地焕发出新的活力。随着大模型的到来&#xff0c;推荐系统正处于变革的前夜&#xff0c;原有的系统模块…
阅读更多...
线性代数的学习和整理8：行列式相关

线性代数的学习和整理8：行列式相关

目录 1 从2元一次方程组求解说起 1.1 直接用方程组消元法求解 1.2 有没有其他方法呢&#xff1f;有&#xff1a;比如2阶行列式方法 1.3 3阶行列式 2 行列式的定义 2.1 矩阵里的方阵 2.2 行列式定义&#xff1a;返回值为标量的一个函数 2.3 行列式的计算公式 2.4 克拉…
阅读更多...
Ubuntu 配置国内源

Ubuntu 配置国内源

配置国内源 因为众所周知的原因&#xff0c;国外的很多网站在国内是访问不了或者访问极慢的&#xff0c;这其中就包括了Ubuntu的官方源。 所以&#xff0c;想要流畅的使用apt安装应用&#xff0c;就需要配置国内源的镜像。 市面上Ubuntu的国内镜像源非常多&#xff0c;比较有…
阅读更多...
MinDoc:针对IT团队的文档、笔记系统

MinDoc:针对IT团队的文档、笔记系统

作为一名IT从业者&#xff0c;无论是在公司团队中&#xff0c;还是在平时自己写一些笔记、博客等文档&#xff0c;我都习惯使用markdown来进行书写。在使用过许多支持markdown语法的系统或软件&#xff08;如Typora、未知、我来、思源、觅道等&#xff09;后&#xff0c;我总觉…
阅读更多...
vr游乐场项目投资方案VR主题游乐馆互动体验

vr游乐场项目投资方案VR主题游乐馆互动体验

VR文旅景区沉浸互动体验项目是指利用虚拟现实技术在文旅景区中创建沉浸式的互动体验项目。通过虚拟现实技术&#xff0c;游客可以身临其境地体验景区的风景和文化&#xff0c;与虚拟场景中的元素进行互动。 普乐蛙VR设备 普乐蛙VR设备案例分享 这种项目可以为游客带来全新的旅游…
阅读更多...
LeetCode 热题 100（五）：54. 螺旋矩阵、234. 回文链表、21. 合并两个有序链表

LeetCode 热题 100（五）：54. 螺旋矩阵、234. 回文链表、21. 合并两个有序链表

题目一&#xff1a; 54. 螺旋矩阵https://leetcode.cn/problems/spiral-matrix/ 题目要求&#xff1a; 思路&#xff1a;一定要先找好边界。如下图 &#xff0c;上边界是1234&#xff0c;右边界是8、12&#xff0c;下边界是9、10、11&#xff0c;左边界是5&#xff0c;所以可…
阅读更多...
scope测试CAN物理层

scope测试CAN物理层

应用范围 测试CAN物理层&#xff1a;bus显性位电平、隐性位电平、bit长度、波特率等 要点 接线 sync同步线scope的trigger线&#xff0c;需要连到报文所在的bus/通道的那个CAN设备&#xff08;vector&#xff09;上&#xff0c;如可以连到VN1640的sync三点端子口&#xff0…
阅读更多...
栈和队列在数据结构中的应用

栈和队列在数据结构中的应用

文章目录 理解栈和队列的概念及其特点栈的应用和操作队列的应用和操作结论 &#x1f389;欢迎来到数据结构学习专栏~探索栈和队列在数据结构中的应用 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客&#x1f388;该系列文章专栏&#xff1a;…
阅读更多...
最新文章

Copyright @ 2022~2023