Vue路由（详解）

news2024/12/23 9:03:41

目录

路由原理

路由到底有什么作用？

路由安装和使用（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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机毕业设计源码-基于java+springboot+vue开发的短视频播放系统-lw

计算机毕业设计源码-基于java+springboot+vue开发的短视频播放系统-lw

参考源码 文章目录 前言一、项目运行环境配置二、主要技术javaMysql数据库JSP技术B/S结构 三、系统设计四、功能截图总结 前言 随着社会的不断发展与进步&#xff0c;21世纪的今天&#xff0c;人们对信息科学的认识已由低层次向高层次发展&#xff0c;从感性认识逐渐提高到理…
阅读更多...
【LeetCode】复写零

【LeetCode】复写零

复写零 题目描述算法描述编程代码 链接: 复写零 题目描述 算法描述 编程代码 class Solution { public:void duplicateZeros(vector<int>& arr) {int n arr.size();int dest -1,cur 0;while(cur < n){if(arr[cur]){dest;}else{dest2;}cur;if(dest > n-1){…
阅读更多...
【SpringSecurity】一、SpringSecurity入门

【SpringSecurity】一、SpringSecurity入门

文章目录 1、背景2、相关概念3、Java安全框架的实现4、入门案例4、使用配置文件配置用户名和密码5、基于内存的多用户管理 1、背景 新建个SpringBoot工程&#xff0c;写三个controller&#xff0c;里面有三个接口&#xff1a; //学生 RestController RequestMapping("/s…
阅读更多...
ORB-SLAM系列算法演进

ORB-SLAM系列算法演进

ORB-SLAM算法是特征点法的代表&#xff0c;当前最新发展的ORB-SLAM3已经将相机模型抽象化&#xff0c;适用范围非常广&#xff0c;虽然ORB-SLAM在算法上的创新并不是很丰富&#xff0c;但是它在工程上的创新确实让人耳目一新&#xff0c;也能更好的为AR、机器人的算法实现落地。…
阅读更多...
hive表的全关联full join用法

hive表的全关联full join用法

背景&#xff1a;实际开发中需要用到全关联的用法&#xff0c;之前没遇到过&#xff0c;现在记录一下。需求是找到两张表的并集。 全关联的解释如下&#xff1b; 下面建两张表进行测试 test_a表的数据如下 test_b表的数据如下&#xff1b; 写第一个full join 的SQL进行查询…
阅读更多...
14.广义表

14.广义表

目录 一. 基本术语 二. 广义表的性质 三. 广义表与线性表的区别和联系 四. 广义表的基本运算 一. 基本术语 广义表&#xff08;又称列表Lists&#xff09;是n>0个元素的有限序列&#xff0c;其中每一个ai或者是原子&#xff0c;或者是一个广义表。 广义表通常记作&am…
阅读更多...
电力防雷监测的综合防雷方案

电力防雷监测的综合防雷方案

电力行业是国家的重要基础设施之一&#xff0c;也是雷电天气下最容易受到雷击的设施之一。 雷电对电力设施的影响是巨大的&#xff0c;不仅会造成设备损坏或数据丢失&#xff0c;还会引发火灾、爆炸、中毒、交通事故等次生灾害&#xff0c;给社会带来严重的影响。 因此&#xf…
阅读更多...
【并发编程】详解并发编程中Synchronized的特性(可见性、有序性、可重入性、禁止指令重排序)(๑•̀ㅂ•́)و✧

【并发编程】详解并发编程中Synchronized的特性(可见性、有序性、可重入性、禁止指令重排序)(๑•̀ㅂ•́)و✧

1、synchronized 禁止指令重排分析 我们先看如下代码&#xff1a; class MonitorExample {int a 0;public synchronized void writer() { //1a; //2} //3public synchronized void reader() { //4int i …
阅读更多...
[保研/考研机试] KY212 二叉树遍历 华中科技大学复试上机题 C++实现

[保研/考研机试] KY212 二叉树遍历 华中科技大学复试上机题 C++实现

题目链接&#xff1a; 二叉树遍历_牛客题霸_牛客网二叉树的前序、中序、后序遍历的定义&#xff1a; 前序遍历&#xff1a;对任一子树&#xff0c;先访问根&#xff0c;然后遍历其左子树&#xff0c;最。题目来自【牛客题霸】https://www.nowcoder.com/share/jump/43719512169…
阅读更多...
开学必备物品清单！这几款优先考虑！

开学必备物品清单！这几款优先考虑！

​马上就要开学了&#xff0c;同学们也要准备一系列开学用品&#xff0c;方便我们的学习生活&#xff0c;那有哪些数码物品可以在开学前准备的呢&#xff0c;接下来给大家安利几款很不错很实用的数码好物&#xff01; 推荐一&#xff1a;南卡00压开放式蓝牙耳机 南卡00压开放式…
阅读更多...
青源Workshop丨AI+心理干预研讨会

青源Workshop丨AI+心理干预研讨会

青源Workshop丨No.23 AI心理干预 当前&#xff0c;抑郁症、焦虑症等心理障碍成为社会关注的焦点&#xff0c;如何有效地缓解和治疗这些心理问题成为一个重要的研究方向。在这样的背景下&#xff0c;如何利用AI等先进技术手段来辅助心理疾病的治疗备受关注。例如&#xff0c;通过…
阅读更多...
【FM-CW雷达】一种通信系统技术——调频连续波信号（FM-CW）（Simulink实现）

【FM-CW雷达】一种通信系统技术——调频连续波信号（FM-CW）（Simulink实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
英伟达™（NVIDIA®）535.98 Linux 图形驱动程序发布

英伟达™（NVIDIA®）535.98 Linux 图形驱动程序发布

导读英伟达™&#xff08;NVIDIA&#xff09;公司近日发布了适用于 Linux、FreeBSD 和 Solaris 系统的 NVIDIA 535.98 图形驱动程序&#xff0c;作为其生产分支的维护更新&#xff0c;解决了各种错误和问题。 在英伟达™&#xff08;NVIDIA&#xff09;535.86.05 版本发布仅三周…
阅读更多...
Java“牵手”根据关键词搜索（分类搜索）拼多多商品列表页面数据获取方法，拼多多API实现批量商品数据抓取示例

Java“牵手”根据关键词搜索（分类搜索）拼多多商品列表页面数据获取方法，拼多多API实现批量商品数据抓取示例

拼多多商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取拼多多商品列表和商品详情页面数据&#xff0c;您可以通过开放平台的接口或者直接访问拼多多商城的网页来获取商品列表和详情信息。以下是两种常用方…
阅读更多...
git常用操作命令(不定时更新)

git常用操作命令(不定时更新)

git常用操作命令 将某个分支的某次提交迁移到另外一个分支查询这次提交的ID号方法一方法二 切换到目标分支执行commitID合并指令 将某个分支的某次提交迁移到另外一个分支 查询这次提交的ID号 方法一 方法二 切换到目标分支 git checkout 目标分支名 执行commitID合并指令 gi…
阅读更多...
LSTM数学计算公式

LSTM数学计算公式

LSTM&#xff08;长短期记忆网络&#xff09;是一种循环神经网络&#xff08;RNN&#xff09;的变体&#xff0c;常用于处理时间序列相关的任务。下面将简要介绍LSTM的数学推导和公式模型。 在训练一般神经网络模型时&#xff0c;通常用,其中W为权重&#xff0c;X为输入&#…
阅读更多...
html动态爱心代码【二】(附源码)

html动态爱心代码【二】(附源码)

目录 前言 效果演示 内容修改 完整代码 总结 前言 七夕马上就要到了&#xff0c;为了帮助大家高效表白&#xff0c;下面再给大家带来了实用的HTML浪漫表白代码(附源码)背景音乐&#xff0c;可用于520&#xff0c;情人节&#xff0c;生日&#xff0c;表白等场景&#xff0c…
阅读更多...
API自动化管理: 从繁琐到轻松

API自动化管理: 从繁琐到轻松

在数字化时代&#xff0c;API&#xff08;应用程序编程接口&#xff09;在软件开发中扮演着至关重要的角色。然而&#xff0c;API管理可能会变得十分繁琐&#xff0c;耗费大量时间和资源。那么&#xff0c;如何实现API自动化管理&#xff0c;从而节省时间、提高效率&#xff0c…
阅读更多...
Fedora Linux 的家族（三）：实验室

Fedora Linux 的家族（三）：实验室

导读本文将对 Fedora Linux 实验室版本进行更详细的介绍。 根据个人需求&#xff0c;每个人使用计算机的方式都不同。你可能是一位设计师&#xff0c;需要在计算机上安装各种设计软件。或者你可能是一位游戏玩家&#xff0c;所以需要一个支持你喜欢的游戏的操作系统。有时候我们…
阅读更多...
智慧医院的信息集成平台建设与配电设计方案-安科瑞黄安南

智慧医院的信息集成平台建设与配电设计方案-安科瑞黄安南

摘要&#xff1a;随着云计算、5G、大数据、物联网等技术的不断发展与进步&#xff0c;推动着智慧医院建设的飞速发展。智慧医院建设强调医院内部业务的多流程联动和医疗信息互联互通的高协同效率&#xff0c;突出了数据驱动下构建高质量数据的必要性。文章提出并分析智慧医院发…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023