Vue页面跳转(带参数)
这里假设你已经利用vue-cli搭建好了你的项目配置路由首先在src/router/index.js中引入你想跳转的页面,并配置好跳转路径等信息,示例如下import home from '@/pages/home'import markdown from '@/pages/markdown'Vue.use(Router)export default new Router({...
·
这里假设你已经利用vue-cli搭建好了你的项目
配置路由
首先在src/router/index.js中引入你想跳转的页面,并配置好跳转路径等信息,示例如下
import home from '@/pages/home'
import markdown from '@/pages/markdown'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
},
{
path: '/markdown',
name: 'markdown',
component: markdown
}
],
})
页面跳转(不带参数)
在你要定义的跳转事件中写跳转路径
this.$router.push({path:'/markdown'})
页面跳转(带参数)以及接收参数
首先在标签的跳转函数中以参数形式写上你要传的数据
<li v-for='(item,index) in aritcleLists' @click='selectArticle(item)'></li>
然后在函数中以json传递数据
selectArticle(arg){
this.$router.push({
path:'/articleInfoPage',
query:{
articleId: arg._id
}
})
}
跳转后的页面接收参数
methods(){
getParams(){
this.articleId = this.$route.query.articleId;
}
},
created(){
this.getParams();
}
更多推荐
已为社区贡献1条内容
所有评论(0)