[JavaScript知识库]关于Vue中的路由跳转＋路由传参

一、路由概念

Vue Router 是?Vue.js?(opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

可以简单的理解为指向，当我们点击页面上的某个按钮时 ， 页面就要显示这个按钮相对应的内容，也可以说是一种映射

二、关于路由的跳转方式

1. 编程式导航?

在浏览器中, 调用API方法实现导航的方式, 叫作编程式导航

• this.$router.push('hash地址')

? ? ? 使用push方法 , 跳转到指定hash地址, 并增加一条历史记录

• this.$router.replace('hash地址')

? ? ? 跳转到指定的hash地址, 并替换掉当前的历史记录

2. 声明式导航

在浏览器中 , 点击链接实现导航的方式, 叫作声明式导航

• 在vue项目中点击 <router-link> 实现跳转都属于声明式导航

3.使用history模式进行跳转

• this.$router.go(n)

? ? ?向前或者向后跳转n个页面,当n为正整数, 就是向前跳转, 当n为负整数时, 就是向后跳转

三、关于路由的传参方式

1. 使用 params 进行传参

使用params传参的方式, url路径上不会显示传递的参数 , 但是刷新页面会使参数丢失

?写法 :?

this.$router.push({
    name:'home',
    params:{
        id:123
    }
})

路由配置:

// 路由配置数组
const routes:[
{path:'/home',name:'home',compont:Home}
]

值得注意的地方 :

1. 使用params传值的时候, 必须使用命名路由 , 也就是在路由配置中必须有name属性,
2. 如果不设置name属性的话 , 在组件中使用接收值得话是空的
3. 在组件中可以通过this.$route.params.id 来获取参数值

解决使用params传参时刷新页面值丢失的情况

在设置路径时 , 使用冒号来拼接所需要的的参数

// 路由配置数组
const routes:[
{path:'/home/:id',name:'home',compont:Home}
]

2. 使用query进行传参

使用query传参 , 在url路径上会显示传递的参数 , 但是数据不会因为刷新页面而丢失

用法:

this.$router.push({
    name:'home',
    query:{
        id:456
    }
})

路由配置:

// 路由配置数组
const routes:[
{path:'/home',compont:Home}
]

?注意点 :?

1. 使用query可以不用设置name属性
2. 在组件中可以通过this.$route.query来获取值

?

?