vue-路由篇页面跳转和页面参数传递

简介：路由文件内容介绍

一 . 页面跳转

二. 页面传参，获取页面传递过参数

三. 路由导航待整理

定义了需要跳转的文件位置映射关系，每一个路由对应一个组件。

/*** @file 主路由配置页*/
import Vue from 'vue'
import Router from 'vue-router'
// 懒加载，可以节省收屏加载时间
const loadingModule = () => import('@/components/loading')
// 我的模块
import myRouter from '@/modules/my/router'Vue.use(Router)export default new Router({mode: 'history',routes: [{path: '/', redirect: '/loadingModule',meta: {authRequired: true,from: 'loading'}},{path: '/loadingModule', // url路径name: 'loadingModule', // 路由名称component: loadingModule, // 文件},myRouter,]
})

/*** @file 我的模块子路由**/
import myIndex from './index'
import versionList from './versionList'
import my from './my'const myRouter = {path: '/myPage',name: 'myPage',component: myIndex,redirect: '/myPage/my',meta: {authRequired: true,keepAlive: true},children: [{path: 'my',name: 'my',component: my,meta: {authRequired: true,keepAlive: true,}},{path: 'versionList',name: 'versionList',component: versionList,meta: {authRequired: true,keepAlive: true,detail: true,}},]
}export default myRouter

一 . 页面跳转

编程式导航：

// name对应值就是路由文件中定义的路由名称
this.$router.push({ name: 'loadingModule' })// path对应值就是路由文件中定义的路由路径
this.$router.push({ path: '/loadingModule' })// 它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
this.$router.replace({ name: 'loadingModule' })

声明式导航

// to可以是路由文件路由名称
<router-link to="{name:'my'}"></router-link>// to 可以是路由文件路由路径
<router-link to="/myPage/my"></router-link>

二. 页面传参，获取页面传递过参数

query要用path来引入，params要用name来引入，接收参数分别是this.$route.query.name和this.$route.params.name。

name+params 跳转页面参数不会在地址栏中看到，相当于post。

path+query 跳转页面参数在地址栏中可以看到，相当于get。

// 编程式导航-命名路由传参
this.$router.push({ name: 'my',params：{id:1, name:'yizuodao'} })// 编程式导航-地址路由传参
this.$router.push({ path: '/myPage/my', query：{id:1, name:'yizuodao'} })this.$route.params.name
this.$route.query.name

// 声明式导航-命名路由传参
<router-link :to="{ name: 'my', params: { id: 1, name:'yizuodao' }}">User</router-link>// 声明式导航-地址路由传参
<router-link :to="{ path: 'my', query: { id: 1, name:'yizuodao' }}">User</router-link>

三. 路由导航待整理

vue-路由篇页面跳转和页面参数传递相关推荐

vue-router常见问题解决方案。（滚轴回到顶部、页面跳转同一页面报错、手机电脑端路由跳转）
当页面跳转后,侧边滚轴会还是一个页面位置 //路由跳转后,页面回到顶部 router.afterEach(() => {document.body.scrollTop = 0;document. ...
java 开发web页面跳转,javaweb页面跳转
java动态web页面,JavaWEB入门,javaweb页面跳转,javaweb页面登录他们之间的联系是什么 8 serverlet 的生命周期及各阶段的作用 9 java web两种跳转方式分别 ...
uniapp02 封装方法，页面跳转，页面的生命周期，@click，@input，v-model、封装组件、tabbar
一,封装方法默认导出 export default 1. 如果是默认导出只能使用一次 export default 2. 如果你想导出多个可以使用按需导出 export 3 ...
解决Flutter混合开发原生页面跳转Flutter页面黑屏的问题
在Flutter混合开发入门这篇文章中我们介绍了如何在原来的原生项目中集成Flutter,实现了从原生页面跳转flutter页面的功能但是在页面跳转的过程中出现黑屏的问题方法一增加调用flutt ...
vue 路由地址不跳转解决办法
这里写自定义** vue 路由地址不跳转解决办法这是我的报错原因,因为我是一个后端开发对vue不了解我的报错原因是因为: menu.json 中的路径 path:****** name***** ...
防止登录成功后重复刷新页面跳回登录页面
登录action:system/Syslogin/sysLogin.do public String sysLogin() { try { //验证码验证 String yzm = Struts2Ut ...
php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码
摘要腾兴网为您分享:PHP页面跳转 Js页面跳转代码,自动刷宝,中信金通,携程抢票,未来屋等软件知识,以及沃金汇,沃行讯通,securecrt.exe,我的世界变形金刚mod,一票通,农场小分队,手 ...
js关闭当前页面跳转新页面
页面代码: 1 <p class="info"><span style="font-weight: bold">所属项目:</sp ...
vue里面怎么实现页面跳转_vue页面跳转如何实现 vue页面跳转实现代码
vue页面跳转如何实现?本篇文章小编给大家分享一下vue页面跳转实现代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 一.this.$router. ...

vue-路由篇页面跳转和页面参数传递

简介：路由文件内容介绍

一 . 页面跳转

二. 页面传参，获取页面传递过参数

三. 路由导航待整理

vue-路由篇页面跳转和页面参数传递相关推荐

最新文章

热门文章