VUE入门教程( 三 ) _VUE

3、测试

文章插图

参数传递参数传递过程：url请求路径—->路由接收参数—->跳转套组件显示参数
1、url请求路径
<router-link :to="{name:'Profile',params:{id:1} }">个人信息</router-link>2、路由接收参数
方式一:
{path:'/user/profile/:id',name:'Profile',component:Profile},方式二：
{path:'/user/profile/:id',name:'Profile',component:Profile,props:true}3、组件模板展示参数
方式一：
{ {$route.params.id} }方式二：

<template><div>{ {id} }</div></template><script>export default {//接收路由传过来的idprops:['id'],name: "Profile"}</script><style scoped></style>

路由钩子与异步请求路由模式hash：路径带 # 符号(默认)，如 http://localhost/#/login history：路径不带 # 符号，如 http://localhost/login
路由钩子与异步请求beforeRouteEnter：在进入路由前执行 beforeRouteLeave：在离开路由前执行类似于过滤器，在进入模板前可以使用路由钩子进行异步请求数据，并在模板展示

<template><div>{ {info.url} }</div></template><script>export default {props:['id'],name: "Profile",beforeRouteEnter:(to,from,next)=>{console.log("进入页面之前");next(vm=>{//进入路由之前执行getData方法vm.getData()});},beforeRouteLeave:(to,from,next)=>{console.log("离开页面之前")next();},//返回请求的数据data(){return{info:{}}},methods:{getData:function () {//使用axIOS异步请求数据this.axios({method:'get',url:'http://localhost:8080/static/mock/data.json'}).then(res=>(this.info=res.data))}}}</script><style scoped></style>

【VUE入门教程】