vue跳转带head_vue-router实现组件间的跳转（参数传递）

通过VueRouter来实现组件之间的跳转：参数的传递，具体内容如下

login ---用户名--->main

①明确发送方和接收方

②配置接收方的路由地址

{path:'/myTest',component:TestComponent}

-->

{path:'/myTest/:id',component:TestComponent}

③接收方获取传递来的数据

this.$route.params.id

④跳转的时候，发送参数

this.$router.push('/myTest/20')

跳转

代码：

传参

{{msg}}

//创建主页面组件

var myMain = Vue.component("main-component",{

//保存登录传递过来的数据

data:function(){

return {

uName:''

}

},

template:`

主页面用户名:{{uName}}

`,

//挂载该组件时自动拿到数据

beforeMount:function(){

//接收参数

console.log(this.$route.params);

this.uName = this.$route.params.myName ;

}

})

//创建登录页面组件

var myLogin = Vue.component("login-component",{

//保存用户输入的数据

data:function(){

return {

userInput:""

}

},

methods:{

toMain:function(){

//跳转到主页面，并将用户输入的名字发送过去

this.$router.push("/main/"+this.userInput);

console.log(this.userInput);

}

},

template:`

登录页面

登录到主页面

登录到主页面

`

})

var NotFound = Vue.component("not-found",{

template:`

404 Page Not Found

返回登录页

`

})

//配置路由词典

const myRoutes = [

{path:"",component:myLogin},

{path:"/login",component:myLogin},

//注意冒号,不用/否则会当成地址

{path:"/main/:myName",component:myMain},

//没有匹配到任何页面则跳转到notfound页面

{path:"*",component:NotFound}

]

const myRouter = new VueRouter({

routes:myRoutes

})

new Vue({

router:myRouter,

el:"#container",

data:{

msg:"Hello VueJs"

}

})

// 注意,路由地址

传参练习

{{msg}}

//创建产品列表组件

var myList = Vue.component("product-list",{

//保存产品列表的数据

data:function(){

return{

productList:["苹果","华为","三星","小米","vivo"]

}

},

template:`

这是列表页

• //将index传递过去

  {{tmp}}

`

})

//详情页组件

var myDetail = Vue.component("product-detail",{

//保存传递过来的index

data:function(){

return{

myIndex:""

}

},

//在挂载完成后,将接收到的index赋值给myIndex

mounted:function(){

this.myIndex = this.$route.params.id;

},

template:`

这是详情页

这是id为：{{myIndex}}的产品

`

})

//页面找不到的时候

var NotFound = Vue.component("not-found",{

template:`

404 Page Not Found

`

})

// 配置路由词典

const myRoutes = [

{path:"",component:myList},

{path:"/list",component:myList},

{path:"/detail/:id",component:myDetail},

{path:"*",component:NotFound},

]

const myRouter = new VueRouter({

routes:myRoutes

})

new Vue({

router:myRouter,

el:"#container",

data:{

msg:"Hello VueJs"

}

})

关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。