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>

三. 路由导航待整理

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值