路由的传参数

作者: Cherish丶任 | 来源:发表于2018-10-07 19:30 被阅读0次

Next.js 跳转传参并接收接参
vue中组件3种编程式路由跳转传参
几种vue的组件传值方式
React中使用 react-router-dom 路由传参的三
34.vue路由跳转参数的携带
vue传参
关于vue路由传值，组件传值问题
Vue-Router
vue-8
vue获取url后面的参数

路由的传参
1：查询字符串
/user/zhuce?uname=jack&&old=18
接收：{{ $route.query}} 接收$ route.query为固定值，可在后面加具体的对象
2:rest风格传参
/user/denglu/uname/jack
接收：{{$route.params }}

接收$route.params为固定值，可在后面加具体的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/index">首页</router-link>
    <router-link to="/urse">用户页</router-link>
    <router-view></router-view>
</div>
<script>
    var Index={
        template:`
             <h1>这是首页</h1>
        `
    }
    var Urse={
        template:`
             <div>
                 <h1>这是用户页</h1>
                 <ul>
                    <li><router-link to="/urse/eee/uname=jack&age=18">注册</router-link></li>
                    <li><router-link to="/urse/ssss/jack/18">登录</router-link></li>
                 </ul>
                 <router-view></router-view>
             </div>
        `
    }
    var Eee={
        template:`
        <div>
            <h2>111</h2>
            <a href="#">{{$route.query}}</a>
            <ul>
                   <li>
                        {{$route.query.uname}}
                   </li>
                   <li>
                        {{$route.query.age}}
                   </li>
            </ul>
        </div>
        `
    }
    var Ssss={
        template:`
        <div>
              <h2>2222</h2>
              <p>{{$route.params}}</p>
              <ul>
                 <li>{{$route.params.ursename}}</li>
                 <li>{{$route.params.urseage}}</li>
            </ul>
        </div>
        `
    }
    const a=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {
            path:'/urse',
            component:Urse,
            children:[
                {path:'eee',component:Eee},
                {path:'ssss/:ursename/:urseage',component:Ssss}
            ]
        }
    ]
    const b=new VueRouter({
        routes:a
    })
    new Vue({
        el:'#app',
        router:b
    })
</script>
</body>
</html>