vue路由传参

2019年8月24日

使用query方式传递参数

<router-link to="/login?id=10&name=zs">登录</router-link>

?后就是需要传递的参数
在login模块中添加created函数

var login={
            template:'<h1>登录---{{$route.query.id}}---{{$route.query.name}}</h1>',
            data(){
                return{
                    msg:'123'
                }
            },
            created(){
                console.log(this.$route)
                console.log(this.$route.query.id)
            }
        }

此时参数存在于$route.query内部 用插值表达式即可将参数绑定到页面上

---

使用parms传递参数

先设置路由的匹配规则

var router=new VueRouter({
            routes:[
                {path:'/login/:id',component:login},
                {path:'/register',component:register}
            ]
        })

这里/login后面的 :id 的意思是将/login后面获得的参数存储至id中

此时通过URL传递id

<router-link to="/login/10">登录</router-link>

params中就接收到了参数

路由规则是根据matched来解析的
这里的matched将路由规则解析成了正则表达式

使用$route.params.id就可以拿到参数

{path:'/login/:id/:name',component:login}

这样可以进行两个参数的传递

<router-link to="/login/10/zs">登录</router-link>

但是页面必须拿到两个参数之后才能载入login组件