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>

三. 路由导航待整理