Vue-router 第6节 vue-router的重定向-redirect
时间:2020-04-16
本文章向大家介绍Vue-router 第6节 vue-router的重定向-redirect,主要包括Vue-router 第6节 vue-router的重定向-redirect使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Vue-router 第6节 vue-router的重定向-redirect
第6节 vue-router的重定向-redirect
开发中有时候我们虽然设置的路径不一致,但是我们希望跳转到同一个页面,或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。
redirect基本重定向
我们只要在路由配置文件中(/src/router/index.js
)把原来的component换成redirect参数就可以了。我们来看一个简单的配置。
export default new Router({
routes: [
{
path: '/',
component: HelloWorld
},{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
},{
path:'/goHome',
redirect:'/'
}
]
})
相应的,App.vue页面只需添加:
<router-link to="/goHome">goHome</router-link>|
这里我们设置了gohome路由,但是它并没有配置任何component(组件),而是直接redirect到path:’/’下了,这就是一个简单的重新定向。这个时候能跳回到默认页面(我们的Home页面),但地址栏还是http://localhost:8080/#/,不会改变。
重定向时传递参数
我们已经学会了通过url来传递参数,那我们重定向时如果也需要传递参数怎么办?其实vue也已经为我们设置好了,我们只需要在redirect后边的参数里复制重定向路径的path参数就可以了。我们来看一段代码:
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
},{
path:'/goParams/:newsId(\\d+)/:newsTitle',
redirect:'/params/:newsId(\\d+)/:newsTitle'
}
相应的,在App.vue中添加:
<router-link to="/goParams">goParams</router-link>
已经有了一个params路由配置,我们在设置一个goParams
的路由重定向,并传递了参数。这时候我们的路由参数就可以传递给params.vue
组件了。参数接收方法和正常的路由接收方法一样。
点击goParams:
我们发现参数能够进行重定向,地址栏也变化成params。
但如果什么都不传,只写<router-link to="/goParams">goParams</router-link>
,页面没有任何内容,地址栏还是http://localhost:8080/#/goParams
原文地址:https://www.cnblogs.com/Elva3zora/p/12711250.html
- node-sass 安装失败的解决措施
- JavaMelody监控SQL
- 关于jboss的线程问题+java.lang.outofmemoryError
- 《了不起的 nodejs》中 TwitterWeb 案例 bug 解决
- java.lang.ClassNotFoundException与java.lang.NoClassDefFoundError的区别
- 【java开发系列】—— Tomcat编译报错
- java.lang.NoClassDefFoundError: org/aopalliance/aop/Advice
- 《像计算机科学家一样思考Java》—— 读后总结
- 记录安装oracle的那些事(三)之oracle Database R2安装
- Elasticsearch Javascript API增删改查
- Oracle二三事之 Oracle SPARC SuperCluster的九大技术优势
- 两个 viewports 的故事-第二部分
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
- AngularJS 技术总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法