路由进阶(传参)

2018-09-26  本文已影响0人  Crazy丶此木
<div>
      <router-link to="/index">主页</router-link>
      <router-link to="/first">子页</router-link>
      <router-view></router-view>
</div>
<script src:'vue.js链接'></script>
<script src:'vue.router链接'></script>
<script>
      var Index={
            template:`
                  <h1>这是主页</h1>
            `
      };
      var First={
            template:`
                  <div>
                  <h2>这是分页</h2>
                  <ul>
                        <li>
                              <router-link to='/first/login?name=qwe&pass=123'>登录</router-link>
                                      (&符可加一个或两个)
                        </li>
                        <li>
                              <router-link to='/first/regist/asd/456'>注册</router-link>
                        </li>
                  </ul>
                  <router-view></router-view>
                  </div>
            `
      };
      var Login={
            template:`
                  <div>
                        <h3>这是登录</h3>
                        <a>{{$route.query}}</a>
                        <a>{{$route,query.name}}</a>
                        <a>{{$route.query.pass}}</a>
                  </div>
            `
      };
      var Regist={
            template:`
                  <div>
                        <h3>这是注册</h3>
                        <a>{{$route.params}}</a>
                        <a>{{$route.params.name}}</a>
                        <a>{{$route.params.pass}}</a>
                  </div>
            `
      };
      const routes=[      
            {path:'/',component:Index},
            {path:'/index',component:Index},
            {
                  path:'/first',
                  component:First,
                  childer:[
                        {path"login",component:Login},
                        {path:"regist",component:Regist}
                  ]
            }
      ];
      const router=new VueRouter({
            routes:routes,
            linkActiveClass:'active'
      });
      new Vue({
            el:'.nr',
            router:router
      })
</script>
上一篇 下一篇

猜你喜欢

热点阅读