Vue Router - 路由的使用、两种切换方式、两种传参方式、嵌套方式

目录

一、Vue Router

1.1、下载

1.2、基本使用

a)引入 vue-router.js(注意:要在 Vue.js 之后引入).

 b)创建好路由规则

c)注册到 Vue 实例中

d)展示路由组件

1.3、切换路由的两种方式

1.3.1、以标签的方式切换

1.3.2、以 js 方式切换

1.3.3、在 VueRouter 中多次切换同一个路由存在问题

a)解决方法一:每次切换路由前手动判断

1.4、两种传参方式

1.4.1、通过 querystring 传参

1.4.2、通过 restful 传参

1.5、嵌套路由的使用


一、Vue Router


1.1、下载

通过 Vue Router 可以将现有的 Vue 开发更灵活,使得一个页面中展示多个不同的组件.

下载地址如下:

https://unpkg.com/vue-router/dist/vue-router.js

1.2、基本使用

a)引入 vue-router.js(注意:要在 Vue.js 之后引入).

    <script src="../js/vue.js"></script><!-- router 必须在 vue.js 之后引入 --><script src="../js/vue-router.js"></script>

 b)创建好路由规则

        //1.创建路由对象const router = new VueRouter({//配置路由规则://path: 代表路由路径('#/' 这个哈希路由后面要添加的路由)//component: 代表路由路径对应的组件//redirect: 代表路由重定向//path: "*" 表示匹配所有路由routes: [// { path: '/', component: login }, //配置默认路由(一打开页面就有登录功能),但是!规范不建议一个组件对应多个路由{ path: '/', redirect: '/login' }, //因此可以通过 redirect 进行重定向{ path: '/login', component: login },{ path: '/reg', component: register },{ path: '*', component: notFound } //在老的版本,这个规则必须放在最后一行,但是后续官方做了优化,放哪都可以,但是建议还是放在结尾]});

这里定义的组件如下:

        const login = {template: `<div><h2>登录功能</h2></div>`,}const register = {template: `<div><h2>注册功能</h2></div>`,}const notFound = {template: `<div><h2>404 not found 页面飞到外太空了~</h2></div>`,}

 

c)注册到 Vue 实例中

        const app = new Vue({el: "#app",data: {msg: "Vue路由章节"},router //2.注册路由});

d)展示路由组件

router-view 标签用来渲染组件

    <div id="app"><!-- 3.展示路由组件 --><router-view></router-view></div>

1.3、切换路由的两种方式

1.3.1、以标签的方式切换

        <!-- 1.链接 --><a href="#/login">登录</a><a href="#/reg">登录</a><hr><!-- 2.标签  必须要有 to 属性, to="路由路径" --><router-link to="/login">登录</router-link><router-link to="/reg">注册</router-link><hr><!-- 3.标签 --><router-link :to="{path: '/login'}">登录</router-link><router-link :to="{path: '/reg'}">注册</router-link><hr><!-- 4.标签  根据路由对象 name 属性来切换路由 --><!-- 推荐:路由随时可能会变,而命名不会变,因此可以起到解耦合的作用 --><router-link :to="{name: 'Login'}">登录</router-link><router-link :to="{name: 'Register'}">注册</router-link>

以下是路由规则和组件

        const login = {template: `<div><h1>登录功能</h1></div>`}const register = {template: `<div><h1>注册功能</h1></div>`}//创建路由对象const router = new VueRouter({routes: [//name 表示这个路由对象的唯一身份标识{ path: '/login', component: login, name: "Login" },{ path: '/reg', component: register, name: "Register" },]});

1.3.2、以 js 方式切换

a)例如通过点击事件,触发路由切换

        <button @click="loginSuccess()">一键注册成功</button><!-- 展示组件 --><router-view></router-view>

b)注册组件和创建路由规则

        const login = {template: `<div><h1>登录</h1></div>`}const reg = {template: `<div><h1>注册</h1></div>`}const router = new VueRouter({routes: [{ path: "/", redirect: "/reg" },{ path: "/login", component: login, name: "Login" },{ path: "/reg", component: reg, name: "Reg" },]});

c)js 切换路由

        const app = new Vue({el: "#app",data: {msg: "js 切换路由"},methods: {loginSuccess() {// this.$router.push("/login");//不推荐// this.$router.push({ path: '/login' });//不推荐this.$router.push({ name: "Login" });//推荐使用名称切换}},router});

1.3.3、在 VueRouter 中多次切换同一个路由存在问题

在 VueRouter 中多次切换相同路由出现错误,如下:

有两种解决办法,如下:

首先我们要知道:

  • this.$route 代表当前路由对象 route.
  • this.$router 代表路由管理器对象 VueRouter.
a)解决方法一:每次切换路由前手动判断
        const app = new Vue({el: "#app",data: {msg: "js 切换路由"},methods: {loginSuccess() {//在 VueRouter 中多次切换相同路由出现错误解决办法://1.每次切换前手动判断一下(不推荐,太麻烦)if (this.$route.name != "Login") {this.$router.push({ name: "Login" });}}},router});

b)解决方法二:官方配置

在创建路由规则对象之后加入如下配置

        //2.官方配置:解决 VueRouter 中同一路由多次切换报错问题const original = VueRouter.prototype.push;VueRouter.prototype.push = function push(location) {return original.call(this, location).catch(err => err)};

之后你就可以直接写切换路由的方法了.

                loginSuccess() {this.$router.push({ name: "Login" });}

1.4、两种传参方式

1.4.1、通过 querystring 传参

例如 /login?name=cyk&password=1111

a)如下四种路由传参方式(推荐最后一种)

        <!-- query --><a href="#/login?name=cyk&password=123">登录</a><router-link to="/login?name=cyk&password=123">登录</router-link><router-link :to="{path: '/login', query:{name:'cyk', password:1111}}">登录</router-link><router-link :to="{name: 'Login', query:{name:'cyk',password:1111}}">登录</router-link>

b)在组件中获取参数,如下:

        const login = {template: `<div><h1>登录功能</h1></div>`,created() { //生命周期:已执行完 组件内部事件 和 生命周期函数注册,自身的 data、methods、computed 属性注入和校验//通过 querystring 获取参数 console.log(this.$route); //获取当前路由对象console.log(this.$route.query.name);console.log(this.$route.query.password);}}

c)路由对象如下:

        //创建路由对象const router = new VueRouter({routes: [//querystring 传参{ path: '/login', component: login, name: "Login" }]});

1.4.2、通过 restful 传参

例如 /login/cyk/1111

a)如下三种传参方式(推荐最后一种)

        <!-- restful --><a href="#/register/6/lyj">注册</a><router-link :to="{path: '/register/11/lyj'}">注册</router-link><router-link :to="{name: 'Register', params:{id:11, name:'lyj'}}">注册</router-link>

b)在组件中获取参数,如下:

        const register = {template: `<div><h1>注册功能</h1></div>`,created() {//通过 restful 获取参数console.log(this.$route); //获取当前路由对象console.log(this.$route.params.id);console.log(this.$route.params.name);}}

c)路由对象如下:

        //创建路由对象const router = new VueRouter({routes: [//querystring 传参{ path: '/login', component: login, name: "Login" },//restful 传参{ path: '/register/:id/:name', component: register, name: "Register" },]});

1.5、嵌套路由的使用

在创建 VueRouter 中,path 还有一个 children 参数,用来定义嵌套子组件路由.

例如需求:

1.现在有一个用户列表

2.当点击 “添加用户信息” 时,显示以下对话框

3.点击提交后,回归用户列表路由

实现如下:

a)如下定义组件

    <template id="users"><div><h3>用户列表</h3><router-link :to="{name:'adduser'}">添加用户信息</router-link><table border="1"><tr><td>id</td><td>name</td></tr><tr><td>{{ users.id }}</td><td>{{ users.name }}</td></tr></table><!-- 显示嵌套子组件 --><router-view></router-view></div></template><template id="add-user"><div><div><span>id: </span><input type="text"></div><div><span>name: </span><input type="text"></div><button @click="submit()">提交</button></div></template><script>//用户列表const users = {template: '#users',data() {return {users: [] //这里不能写死,需要请求后端得到参数}},created() {//在组件构建完成后,请求后端得到 users 的所有数据,覆盖空数组this.users = { id: 1, name: 'cyk' }}}//添加用户const adduser = {template: '#add-user',methods: {submit() {//向后端发送请求//提交完成后切换路由this.$router.push({ name: 'users' });}}}</script>

b)创建路由对象

        //创建路由对象const router = new VueRouter({routes: [{path: '/users', component: users, name: 'users',children: [  //嵌套子组件路由//注意:嵌套路由中,子路由不能使用 / 开头{ path: 'adduser', name: 'adduser', component: adduser } //可以通过 /users/useradd 访问到此]},]});

c)注册到 Vue 实例中

        const app = new Vue({el: "#app",component: {users,adduser},router});

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

会议OA小程序首页布局

目录 一. Flex布局介绍 1.1 什么是Flex布局 1.2 基本概念 1.3 Flex属性 二. 会议OA首页轮播图的实现 配置 Mock工具 swiper 效果展示 三. 会议OA首页会议信息布局 index.js index.wxml index.wxss 首页整体效果展示 一. Flex布局介绍 布局的传统解决方案&#x…

简单的对称加密

异或 异或算法的好处便是数A和数B异或后&#xff0c;把结果再和数A异或便可得到B&#xff0c;或者和数B异或可重新得到数据A。利用异或的这个特性可简单实现数据的加密和解密算法。 恺撒密码 恺撒密码的替换方法是通过排列明文和密文字母表&#xff0c;密文字母表示通过将明…

MATLAB | 对随机信号进行统计分析,绘制频次直方图、频率分布图,与理论概率密度进行比较

一、问题描述 对于一个随机信号&#xff0c;我们可以通过统计手段&#xff0c;得到其的频次分布图&#xff08;直方图&#xff09;&#xff0c;并由此计算出它的频率分布图。当观察次数区域无穷大时&#xff0c;频率分布图近似于概率密度函数。 下面我们以稳定分布的随机变量为…

互联网Java工程师面试题·Java 总结篇·第五弹

目录 47、Java 语言如何进行异常处理&#xff0c;关键字&#xff1a;throws、throw、try、catch、finally 分别如何使用&#xff1f; 48、运行时异常与受检异常有何异同&#xff1f; 49、列出一些你常见的运行时异常&#xff1f; 50、阐述 final、finally、finalize 的区别…

在 IDEA 中的各种调试技巧,轻松定位 Bug(超级全面)

在现在的开发中&#xff0c;我们经常采用Debug来追踪代码的运行流程&#xff0c;通常在程序运行过程中出现异常&#xff0c;启用Debug模式可以分析定位异常发生的位置&#xff0c;以及在运行过程中参数的变化。通常我们也可以启用Debug模式来跟踪代码的运行流程去学习三方框架的…

Orleans的成员管理和故障检测故障检测

Orleans的成员管理和故障检测故障检测 简介 Orleans框架是一个基于.NET平台的开源分布式系统框架&#xff0c;用于开发可扩展&#xff0c;高可用&#xff0c;高性能的云服务应用程序。它采用了Actor模型&#xff0c;将分布式系统中的各个节点抽象成为Actor&#xff0c;使得开…

蓝桥杯每日一题2023.10.17

迷宫 - 蓝桥云课 (lanqiao.cn) 题目描述 样例&#xff1a; 01010101001011001001010110010110100100001000101010 00001000100000101010010000100000001001100110100101 01111011010010001000001101001011100011000000010000 0100000000101010001101000010100000101010101100…

nginx正反向代理,负载均衡

Nginx 正向代理&#xff0c;反向代理 &#xff0c;负载均衡 Nginx有两种代理协议 七层代理&#xff08;http协议&#xff09; 四层代理&#xff08;tcp/udp流量转发&#xff09; 四层代理七层代理概念 四层代理 四层代理&#xff1a;基于tcp/ip协议层的转发代理方式&#…

LabVIEW建立生产者消费者

LabVIEW建立生产者消费者 生产者/消费者设计模式由并行循环组成&#xff0c;这些循环分为两类&#xff1a;生产者循环和消费者循环。生产者循环和消费者循环间的通信可以使用队列或通道连线来实现。 队列 LabVIEW内置的队列操作VI可在函数选板>>数据通信>>队列操…

python每日一练(9)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…

小程序框架

目录 一.什么是小程序框架 二.视图层 先建立四个包 数据绑定 条件渲染 ​编辑 使用模板 事件系统 所有a.js 输出结果 ​编辑 三.跳转 a页面跳b页面 ​编辑 a页面跳c页面 测试结果 四.生命周期 一级跳一级 一级跳二级 二级跳二级 页面隔代跳转 一.什么是小程…

Flink 的集群资源管理

集群资源管理 一、ResourceManager 概述 1、ResourceManager 作为统一的集群资源管理器&#xff0c;用于管理整个集群的计算资源&#xff0c;包括 CPU资源、内存资源等。 2、ResourceManager 负责向集群资源管理器申请容器资源启动TaskManager实例&#xff0c;并对TaskManag…

安装Elasticsearch步骤(包含遇到的问题及解决方案)

注&#xff1a;笔者是在centos云服务器环境下安装的Elasticsearch 目录 1.安装前准备 2.下载Elasticsearch 3.启动Elasticsearch 非常容易出问题 第一次运行时&#xff0c;可能出现如下错误&#xff1a; 一、内存不足原因启动失败 二、使用root用户启动问题 三、启动ES自…

Vue3 实现文件预览 Word Excel pdf 图片 视频等格式 大全!!!!

先上效果图 插件安装 先说 word 文件是docx-preview插件 excel文件是用 xlsx 插件 介绍后端返回的数据 因为在拦截器处 做了对数据的处理 最后你调接口拿到的数据是 一个对象 里面包含: url : blob对象转换的用于访问Blob数据的临时链接。这个链接可以被用于在网页中展示…

Educational Codeforces Round 156 (Rated for Div. 2)

C. Decreasing String 分析&#xff1a;暴力做法是很容易想到的&#xff0c;但时间复杂度为O(n2) 这是我打cf以来看到的最好的题解。 #include<cstdio> #include<set> #include<list> #include<queue> #include<math.h> #include<stdlib.h&g…

力扣刷题 day47:10-17

1.位1的个数 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位数为 1 的个数&#xff08;也被称为汉明重量&#xff09;。 方法一&#xff1a;逐个判断 利用n&1 #方法一&#xff1a;逐个…

人工智能时代大模型算法之文心大模型4.0

大家好&#xff0c;我是爱编程的喵喵。双985硕士毕业&#xff0c;现担任全栈工程师一职&#xff0c;热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。…

NSS [BJDCTF 2020]easy_md5

NSS [BJDCTF 2020]easy_md5 先看题目&#xff0c;给了一个输入框 翻阅了源码没发现什么可疑点 扫一下试试&#xff0c;也没东西 抓个包试试&#xff0c;在响应头发现了hint 那就是奇妙的md5了&#xff0c;输入ffifdyop 原理&#xff1a; ffifdyop的MD5加密结果是276f722736c…

索引背后的数据结构——B+树

为什么要使用B树&#xff1f; 可以进行数据查询的数据结构有二叉搜索树、哈希表等。对于前者来说&#xff0c;树的高度越高&#xff0c;进行查询比较的时候访问磁盘的次数就越多。而后者只有在数据等于key值的时候才能进行查询&#xff0c;不能进行模糊匹配。所以出现了B树来解…

JVM垃圾回收算法介绍

堆的分代和区域 &#xff08;年轻代&#xff09;Young Generation&#xff08;eden、s0、s1 space&#xff09; Minor GC &#xff08;老年代&#xff09;Old Generation &#xff08;Tenured space&#xff09; Major GC|| Full GC &#xff08;永久代&#xff09;Permanent…