美文网首页
Vue_路由的使用

Vue_路由的使用

作者: Locdee_落地 | 来源:发表于2018-08-07 14:14 被阅读0次

    Vue-router 路由的基本使用

    在一个系统或APP中,有多个页面组成,通常会使用Vue中的组件来实现。那么当从一个页面跳转到另一个页面时,通过url路径来实现的,哪个url对应哪个页面,在Vue中通过 vue-router来实现

    配合Vue1.0使用的版本的帮助文档地址:
    https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn
    配合vue1.0使用的vue-router下载地址:
    https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.10/vue-router.min.js
    配合Vue2.0使用的版本的帮助文档地址:
    http://router.vuejs.org/zh-cn/installation.html
    配合Vue2.0使用的vue-router下载地址:
    https://unpkg.com/vue-router/dist/vue-router.js

    Vue-routervue2.0中的使用
     <!-- 引入vue2.0和vue-router -->
     <script src="vue2.js"></script>
     <script src="vue-router.js"></script>
    
      <body>
        <!-- 定义模板 -->
          <div id="app">
              <router-link to="/login">登录</router-link>
              <router-link to="/register">注册</router-link>
              <!-- 占位符 -->
              <router-view></router-view>
          </div>
      </body>
      <script type="text/javascript">
          // 定义根组件
          var App = Vue.extend()
          // 定义注册组件
          var register = Vue.extend({
              template:"<h2>注册...</h2>"
          })
          // 定义登录组件
          var login = Vue.extend({
              template:"<h2>登录...</h2>"
          })
    
          // 定义路由并注册路由规则
          var vueRouter = new VueRouter({
              routes:[
                  {path:'/',redirect:'/login'},
                  {path:'/login',component:login},
                  {path:'/register',component:register},       
              ]
          })
          // 使用路由
          new Vue({
              el:"#app",
              router:vueRouter
          })
      </script>

    相关文章

      网友评论

          本文标题:Vue_路由的使用

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