在Vue中,我们可以通过vue-router进行路由跳转,首先需要在main.js中引入vue-router并挂载到Vue实例上:
javascript import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }) new Vue({ router, render: h => h(App) }).$mount('#app')
在上面的代码中,我们定义了两个路由:'/'和'/about',分别对应着Home组件和About组件。
在组件中,我们可以通过$router对象进行路由跳转,例如:
javascript this.$router.push('/about')
上面的代码会将路由跳转到'/about'。
如果我们想要在路由跳转的同时传递参数,可以使用query或params:
javascript // 使用query进行参数传递 this.$router.push({ path: '/about', query: { name: 'vue' } }) // 使用params进行参数传递 this.$router.push({ path: '/about', params: { name: 'vue' } })
在vue-router中,我们可以通过query或params进行参数传递。
query方式传递参数:
javascript // 路由定义 { path: '/about', component: About, props: route => ({ name: route.query.name }) } // 路由跳转 this.$router.push({ path: '/about', query: { name: 'vue' } }) // 组件中接收参数 props: ['name']
上面的代码中,我们在路由定义中使用props接收参数,然后在路由跳转时使用query进行参数传递。在组件中,我们可以通过this.name获取到传递的参数。
params方式传递参数:
javascript // 路由定义 { path: '/about/:name', component: About, props: true } // 路由跳转 this.$router.push({ path: '/about/vue' }) // 组件中接收参数 props: ['name']
上面的代码中,我们在路由定义中使用props: true开启了props传参,然后在路由跳转时使用params进行参数传递。在组件中,我们可以通过this.name获取到传递的参数。