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 } //在老的版本,这个规则必须放在最后一行,但是后续官方做了优化,放哪都可以,但是建议还是放在结尾]});

在实际的项目中,component 后面最好写成 箭头函数,可以提高效率(懒汉模式,使用的时候才加载).

最佳写法如下:

        //1.创建路由对象const router = new VueRouter({//配置路由规则://path: 代表路由路径('#/' 这个哈希路由后面要添加的路由)//component: 代表路由路径对应的组件//redirect: 代表路由重定向//path: "*" 表示匹配所有路由routes: [{ path: '/', redirect: '/login' },{ path: '/login', component: () => import('../views/Login') }, //这里的 Login 就是 Login.vue 的前缀 { path: '/reg', component: () => import('../views/Reg') },{ path: '*', component: () => import('../views/404') } ]});

 

这里定义的组件如下:

        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.mzph.cn/news/114581.shtml

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

相关文章

ubuntu20.04 nvidia显卡驱动掉了,变成开源驱动,在软件与更新里选择专有驱动,下载出错,调整ubuntu镜像源之后成功修复

驱动配置好&#xff0c;环境隔了一段时间&#xff0c;打开Ubuntu发现装好的驱动又掉了&#xff0c;软件与更新 那里&#xff0c;附加驱动&#xff0c;显示开源驱动&#xff0c;命令行输入 nvidia-smi 命令查找不到驱动。 点击上面的 nvidia-driver-470&#xff08;专有&#x…

wps excel js编程

定义全局变量 const a "dota" function test() {Debug.Print(a) }获取表格中单元格内容 function test() {Debug.Print("第一行第二列",Cells(1,2).Text)Debug.Print("A1:",Range("A1").Text) }写单元格 Range("C1").Val…

【前端设计模式】之状态模式

引言 在前端开发中&#xff0c;我们经常需要处理复杂的应用状态。这时候&#xff0c;状态模式就能派上用场了。状态模式允许我们根据不同的状态来改变对象的行为&#xff0c;从而实现优雅地管理应用状态。 状态模式的特性 状态模式具有以下特性&#xff1a; 状态&#xff0…

【面试经典150 | 栈】有效的括号

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;栈哈希表 其他语言cpython3 写在最后 Tag 【栈】 题目来源 20. 有效的括号 题目解读 括号有三种类型&#xff0c;分别是小括号、中括号和大括号&#xff0c;每种括号的左右两半括号必须一一对应才是有效的括号&#…

JetBrains系列IDE全家桶激活

jetbrains全家桶 正版授权&#xff0c;这里有账号授权的渠道&#xff1a; https://www.mano100.cn/thread-1942-1-1.html 附加授权后的一张图片

Spark---数据输出

1. 输出为Python对象 collect算子&#xff1a;将RDD各个分区内的数据&#xff0c;统一收集到Driver中&#xff0c;形成一个List对象 reduce算子&#xff1a;对RDD数据集按照传入的逻辑进行聚合 take算子&#xff1a;取RDD的前N个元素&#xff0c;组合成list返回给你 count…

HCIA -- 动态路由协议之RIP

一、静态协议的优缺点&#xff1a; 缺点&#xff1a; 1、中大型网络配置量过大 2、不能基于拓扑的变化而实时的变化 优点&#xff1a; 1、不会额外暂用物理资源 2、安全问题 3、计算路径问题 简单、小型网络建议使用静态路由&#xff1b;中大型较复杂网络&#xff0c;建议使用…

【MySQL】8.0新特性、窗口函数和公用表表达式

文章目录 1. 新增特性2. 移除旧特性2.1 优点2.2 缺点 3. 新特性1&#xff1a;窗口函数3.1 使用窗口函数前后对比3.2 窗口函数分类3.3 语法结构3.4 分类讲解3.4.1 序号函数3.4.1.1 ROW_NUMBER()函数3.4.1.2 RANK()函数3.4.1.3 DENSE_RANK()函数 3.4.2 分布函数3.4.2.1 PERCENT_R…

javaEE -3(12000字详解多线程)

一&#xff1a;单例模式 首先啥是设计模式? 设计模式好比象棋中的 “棋谱”. 红方当头炮, 黑方马来跳. 针对红方的一些走法, 黑方应招的时候有一些固定的套路. 按照套路来走局势就不会吃亏. 软件开发中也有很多常见的 “问题场景”. 针对这些问题场景, 大佬们总结出了一些固…

力扣100114. 元素和最小的山形三元组 II(中等)

题目描述&#xff1a; 给你一个下标从 0 开始的整数数组 nums 。 如果下标三元组 (i, j, k) 满足下述全部条件&#xff0c;则认为它是一个 山形三元组 &#xff1a; i < j < knums[i] < nums[j] 且 nums[k] < nums[j] 请你找出 nums 中 元素和最小 的山形三元组…

【RNA structures】RNA-seq 分析: RNA转录的重构和前沿测序技术

文章目录 RNA转录重建1 先简单介绍一下测序相关技术2 Map to Genome Methods2.1 Step1 Mapping reads to the genome2.2 Step2 Deal with spliced reads2.3 Step 3 Resolve individual transcripts and their expression levels 3 Align-de-novo approaches3.1 Step 1: Generat…

Vue2基础知识(一) 认识Vue

&#x1f48c; 所属专栏&#xff1a;【Vue2】&#x1f600; 作 者&#xff1a;长安不及十里&#x1f4bb;工作&#xff1a;目前从事电力行业开发&#x1f308;目标&#xff1a;全栈开发&#x1f680; 个人简介&#xff1a;一个正在努力学技术的Java工程师&#xff0c;专注基础和…

【JavaEE初阶】 线程池详解与实现

文章目录 &#x1f334;线程池的概念&#x1f384;标准库中的线程池&#x1f340;ThreadPoolExecutor 类&#x1f6a9;corePoolSize与maximumPoolSize&#x1f6a9;keepAliveTime&#x1f6a9;ThreadFactory&#x1f6a9;workQueue&#x1f6a9;RejectedExecutionHandler handl…

【PB续命02】Oracle中加密及编码等

Oracle中实现Md5/Base64/AesBase64/UrlEncode等加密编码的使用备忘&#xff0c;参考其它人的贴子&#xff0c;Oracle 11g 亲测有效。 1. Oracle中实现Md5加密 SELECT lower(MD5(白龙马5217)) FROM dual; --返回结果 72853926982028ab8219921ad2918b8f --或 select utl_raw.…

PDF编辑阅读 PDF Expert v3.5.2

PDF Expert是由Readdle开发的一款专业的PDF编辑和阅读工具。它可以帮助用户在Mac、iPad和iPhone等设备上查看、注释、编辑、填写和签署PDF文档。 以下是PDF Expert的特点&#xff1a; PDF编辑&#xff1a;PDF Expert提供了丰富的PDF编辑功能&#xff0c;包括添加、删除、移动…

【safetensor】Debug

更多信息详见我的另一篇文档: 介绍 加载权重错误 从本地加载 stable-diffusion 时&#xff0c; model_id D:\code\git_diffusion_repo\sd\stable-diffusion-v1-5 pipe StableDiffusionPipeline.from_pretrained(model_id, torch_dtypetorch.float16, revision"fp16&…

SQL基础语法总结(查询)

学习网站&#xff1a;https://www.w3schools.com/sql/&#xff0c;提供在线编程 以下内容仅SQL常见语法总结 数据 Customers表 Products表 OrderDetails表 Orders表 Shippers表 Employees表 选择查询 SELECT select语句用来从头数据库中选择数据 SELECT column1, column2,…

【论文阅读笔记】 Curated Pacific Northwest AI-ready Seismic Dataset

Curated Pacific Northwest AI-ready Seismic Dataset 太平洋西北部人工智能地震数据集 摘要 描述了一个AI就绪地震数据集包括各种地震事件参数 仪器元数据 地震波行描述地震目录和事件属性&#xff08;事件震级类型&#xff0c;信道类型&#xff0c;波形极性&#xff0c;信…

BadNets: Identifying Vulnerabilities in the Machine Learning Model Supply Chain

BadNets: Identifying Vulnerabilities in the Machine Learning Model Supply Chain----《BadNets:识别机器学习模型供应链中的漏洞》 背景&#xff1a; 许多用户将训练过程外包给云计算&#xff0c;或者依赖于经过训练的模型&#xff0c;然后根据特定的任务对模型进行微调。这…

SequenceFile、元数据操作与MapReduce单词计数

文章目录 SequenceFile、元数据操作与MapReduce单词计数一、实验目标二、实验要求三、实验内容四、实验步骤附&#xff1a;系列文章 SequenceFile、元数据操作与MapReduce单词计数 一、实验目标 熟练掌握hadoop操作指令及HDFS命令行接口掌握HDFS SequenceFile读写操作掌握Map…