2018-09-25路由的传参

作者: 其实_dnhl | 来源:发表于2018-09-25 19:18 被阅读15次

Vue实战第二天
vue路由 filters方法和filter过滤用法总结
Next.js 跳转传参并接收接参
vue-router
Vue 动态路由
vue中组件3种编程式路由跳转传参
vue路由传参.md
路由传参
八、Flutter路由
2018-09-25 vue初学十(路由的嵌套及传参)

<style>
    a{
        text-decoration: none;
    }
    .router-link-active{
        color: #ff1db5;
    }
    .adsd{

    }
</style>
<body>
<div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/user">用户页</router-link>
    <!-- 盛放每个页面对应的内容-->
    <router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
    var Home ={
        template:`
      <h1>这是首页</h1>
      `
    };
    var User ={
        template:`
      <div>
          <h1>这是用户页</h1>
          <ul>
              <li>
                <router-link to="/user/regist?uname=jack&age=18">注册</router-link>
              </li>
              <li>
                <router-link to="/user/login/alice/20">登录</router-link>
              </li>
          </ul>
          <router-view></router-view>
      </div>
      `
    };
    var Regist = {
        template:`
            <div>
                <h2>这是注册页</h2>
                <a href="">{{$route.query}}</a>
                <ul>
                    <li>{{$route.query.uname}}</li>
                    <li>{{$route.query.age}}</li>
                </ul>
            </div>
        `
    };
    var Login = {
        template:`
            <div>
                <h2>这是登录页</h2>
                <p>{{$route.params}}</p>
                <ul>
                    <li>{{$route.params.username}}</li>
                    <li>{{$route.params.userage}}</li>
                </ul>
            </div>
      `
    };
    const routes=[

        {path:"/",component:Home},
        {path:"/home",component:Home},
        {path:"/user",component:User,
            children:[
                {path:"/user/regist",component:Regist},
                {path:"/user/login/:username/:userage",component:Login}
            ]
        }
    ];
    const route=new VueRouter({
        routes:routes,
        linkActiveClass:"adsd"
    });
    new Vue({
        el:"#app",
        router:route
    });
</script>
</body>

结果如下：

QQ截图20180925191705.png