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.hqwc.cn/news/144468.html

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

相关文章

postgresql14-表的管理（四）

postgresql14-表的管理（四）

表table 创建表 CREATE TABLE table_name --表名 (column_name data_type column_constraint, --字段名、字段类型、约束字段&#xff08;可选&#xff09;column_name data_type, --表级别约束字段...,table_constraint );CREATE TABLE emp1 --创建表 AS SELECT * FROM empl…
阅读更多...
JavaWeb基础

JavaWeb基础

B/S 和 C/S 的区别 B/S( Browser / Server)&#xff1a;即浏览器/服务器&#xff0c;访问的网站资源存放在服务器&#xff0c;无论服务器存放什么&#xff0c;客户端只需要安装一个浏览器&#xff0c;通过这个浏览器访问服务器的资源&#xff0c;B/S架构也有客户端&#xff0c…
阅读更多...
【AIGC核心技术剖析】Hotshot-XL 一种 AI 文本转 GIF 模型（论文 + 代码：经过训练可与Stable Diffusion XL一起使用）

【AIGC核心技术剖析】Hotshot-XL 一种 AI 文本转 GIF 模型（论文 + 代码：经过训练可与Stable Diffusion XL一起使用）

Hotshot-XL 是一种 AI 文本转 GIF 模型，经过训练可与Stable Diffusion XL一起使用。 Hotshot-XL 可以使用任何经过微调的 SDXL 模型生成 GIF。这意味着两件事： 您将能够使用您可能想要使用的任何现有或新微调的 SDXL 模型制作 GIF。 如果您想制作个性化主题的 GIF，您可以…
阅读更多...
【微信小程序】6天精准入门（第5天:利用案例与后台的数据交互）附源码

【微信小程序】6天精准入门（第5天:利用案例与后台的数据交互）附源码

一、什么是后台交互&#xff1f; 在小程序中&#xff0c;与后台交互指的是小程序前端与后台服务器之间的数据通信和请求处理过程。通过与后台交互&#xff0c;小程序能够获取服务器端的数据、上传用户数据、发送请求等。 小程序与后台交互可以实现数据的传输、用户认证、实时消…
阅读更多...
磁盘分区如何分? 电脑磁盘分区免费软件指南!

磁盘分区如何分? 电脑磁盘分区免费软件指南!

列出并比较顶级免费磁盘分区管理器软件&#xff0c;以选择适用于 Windows 的最佳分区软件&#xff1a; 系统分区在现代计算机设备中起着非常重要的作用。它们可以存储数据&#xff0c;使系统文件远离用户数据&#xff0c;并在同一台设备上安装多个操作系统。但是&#xff0c;这…
阅读更多...
Note——torch.size() umr_maximum() array.max() itertools.product()

Note——torch.size() umr_maximum() array.max() itertools.product()

torch.size Problem TypeError: ‘torch.Size’ object is not callable Reason Analysis torch.Size函数不可调用 因为torch只可以.size() 或 shape Solution 将y.shape()替换为y.size() 或 y.shape ytorch.normal(0,0.01,y.size())2 return umr_maximum(a, axis, None…
阅读更多...
为什么使用KT6368A蓝牙芯片用app连接，基本都在5分钟左右后断开

为什么使用KT6368A蓝牙芯片用app连接，基本都在5分钟左右后断开

为什么我们自己的板子用KT6368A蓝牙芯片&#xff0c;用app连接&#xff0c;基本都是在5分钟左右后 断掉或者断开&#xff0c;什么原因。参考的原理图&#xff0c;是官方的图纸如下 遇到这样的问题&#xff0c;根据我们的经验&#xff0c;大概率是硬件问题&#xff0c;分析方法如…
阅读更多...
高斯分布与高斯过程

高斯分布与高斯过程

一元高斯分布 我们从最简单最常见的一元高斯分布开始&#xff0c;其概率密度函数为&#xff1a; p ( x ) 1 σ 2 π e x p ( − ( x − μ ) 2 2 σ 2 ) p(x)\frac{1}{\sigma\sqrt{2\pi}}exp(-\frac{(x-\mu)^2}{2\sigma^2}) p(x)σ2π ​1​exp(−2σ2(x−μ)2​) 其中 μ \…
阅读更多...
智慧公厕管理系统：让公厕更智能、更高效的利器

智慧公厕管理系统：让公厕更智能、更高效的利器

公厕是城市基础设施的重要组成部分&#xff0c;然而&#xff0c;由于管理不善和公共卫生意识的薄弱&#xff0c;公厕经常面临着脏乱差的问题&#xff0c;令人不愿意使用。为了改善公厕管理的现状&#xff0c;智慧公厕管理系统的出现成为了一种创新的解决方案。 智慧公厕管理系…
阅读更多...
预测宝可梦武力值、分类宝可梦

预测宝可梦武力值、分类宝可梦

regression case 股票预测 无人车看到的各种sensor 影像镜头看到马路上的东西作为输入&#xff0c;输出就是方向盘角度等等的操纵策略 scalar 标量 这个是热力图&#xff0c;相当于你的XYZ但是Z用颜色表示了 closed-form solution 闭合解 learning rate事先定好的数值 在lin…
阅读更多...
轮转数组[中等]

轮转数组[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给定一个整数数组nums&#xff0c;将数组中的元素向右轮转k个位置&#xff0c;其中k是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,…
阅读更多...
双势阱模型

双势阱模型

双势阱模型 原子钟 传统的原子钟利用氨分子 由于隧道效应&#xff0c;上顶点的氮原子可以贯穿三个氢原子形成的势垒&#xff0c;到达下顶点对体系注入微波能量后&#xff0c;氮原子在上下定点之间振荡&#xff0c;体系的能量在两个稳定态之间交替变换&#xff0c;其振荡频率决…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023