美文网首页
路由进阶(传参)

路由进阶(传参)

作者: Crazy丶此木 | 来源:发表于2018-09-26 19:48 被阅读0次
<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>

相关文章

  • 路由进阶(传参)

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • vue路由 filters方法和filter过滤用法总结

    限制单行文字长度 路由传参写法 ---- 声明式 路由传参写法 ---- 编程式 路由传参写法 ---- 路由里要...

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • vue-router

    路由安装 路由配置 路由跳转 路由传参-param使用params传参只能使用name进行引入http://loc...

  • Vue 动态路由

    动态路由 动态路由传参

  • vue中组件3种编程式路由跳转传参

    路由传参 1、路由配置传参(刷新页面不会丢失参数,url会携带参数) A组件跳转B组件传参A组件 路由配置 B组件...

  • vue路由传参.md

    两种传参方法 1.命名路由传参(name, params方式) 2.路由路径传参(path, query方式...

  • 路由传参

    路由传参

  • 八、Flutter路由

    目录一、基本路由二、基本路由传参三、命名路由四、命名路由传参五、替换路由六、返回到根路由 一、基本路由 跳转到De...

网友评论

      本文标题:路由进阶(传参)

      本文链接:https://www.haomeiwen.com/subject/thtjoftx.html