vue2路由跳转传惨
时间: 2023-09-02 12:13:40 浏览: 58
在Vue2中,你可以使用路由来进行页面之间的跳转,并且可以传递参数。以下是一个简单的示例:
首先,在你的路由配置文件中,定义需要跳转的路由,并指定一个参数名:
```javascript
// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Detail from './views/Detail.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/detail/:id', // 参数名为id
name: 'Detail',
component: Detail
}
]
})
```
然后,在触发路由跳转的地方,使用`router.push`方法来进行跳转,并传递参数:
```javascript
// 在某个组件中触发路由跳转
this.$router.push({ name: 'Detail', params: { id: 1 }})
```
在目标页面中,可以通过`$route.params`来获取传递的参数:
```javascript
// Detail.vue
export default {
mounted() {
console.log(this.$route.params.id) // 输出传递的参数值
}
}
```
这样,你就可以在Vue2中实现路由跳转并传递参数了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)