这里假设你已经利用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();
}
Logo

前往低代码交流专区

更多推荐