vue2.0路由寫法、傳參和嵌套

本文轉載自查看原文 2017-12-20 15:52 2627 vue.js

前置知識請戳這里

vue-routerCDN地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

vue-router下載地址：https://github.com/vuejs/vue-router/tree/dev/dist

vue2.0路由基本寫法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-link to="/login">登錄</router-link>
      <router-link to="/register">注冊</router-link>
      <!--組件的顯示占位域-->
      <router-view></router-view>
    </div>

    <script>
      //1.0 准備組件
      var App = Vue.extend({});

      var login = Vue.extend({
        template: '<div><h3>登錄</h3></div>'
      });

      var register = Vue.extend({
        template: '<div><h3>注冊</h3></div>'
      })

      //2.0 實例化路由規則對象
      var router = new VueRouter({
        routes: [{
            path: '/login',
            component: login
          },
          {
            path: '/register',
            component: register
          },
          {
              path:'/',
              //當路徑為/時，重定向到/login
              redirect:'/login'
          }
        ]
      });

      //3.0 開啟路由對象
      new Vue({
        el: '#app',
        router: router
      })
    </script>
  </body>
</html>

vue2.0路由傳參

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-link to="/login">登錄</router-link>
      <router-link to="/register/value">注冊</router-link>
      <!--組件的顯示占位域-->
      <router-view></router-view>
    </div>

    <script>
      //1.0 准備組件
      var App = Vue.extend({});

      var login = Vue.extend({
        template: '<div><h3>登錄</h3></div>'
      });

      var register = Vue.extend({
        template: '<div><h3>注冊{{name}}</h3></div>',
        data:function(){
            return {
                name:''
            }
        },
        created:function(){
            this.name = this.$route.params.name;
        }
      });

      //2.0 實例化路由規則對象
      var router = new VueRouter({
        routes: [{
            path: '/login',
            component: login
          },
          {
            path: '/register/:name',
            component: register
          },
          {
              path:'/',
              //當路徑為/時，重定向到/login
              redirect:'/login'
          }
        ]
      });

      //3.0 開啟路由對象
      new Vue({
        el: '#app',
        router: router
      })
    </script>
  </body>
</html>

vue2.0路由嵌套

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-link to="/account/login">登錄</router-link>
      <router-link to="/account/register">注冊</router-link>
      <!--組件的顯示占位域-->
      <router-view></router-view>
    </div>

    <script>
      //1.0 准備組件
      var App = Vue.extend({});

      var account = Vue.extend({
        template: '<div><h1>賬號組件</h1><router-view></router-view></div>'
      });

      var login = Vue.extend({
        template: '<div><h3>登錄</h3></div>'
      });

      var register = Vue.extend({
        template: '<div><h3>注冊</h3></div>'
      });

      //2.0 實例化路由規則對象
      var router = new VueRouter({
        routes: [{
          path: '/account',
          component: account,
          children: [{
              path: 'login',
              component: login
            },
            {
              path: 'register',
              component: register
            }
          ]
        }]
      });

      //3.0 開啟路由對象
      new Vue({
        el: '#app',
        router: router
      })
    </script>
  </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue2.0路由-路由嵌套 Vue2.0路由嵌套 Vue2.0的變化(2)———vue2.0動畫的變化、vue-2.0路由的變化 vue2.0學習筆記之路由（二）路由嵌套 vue2.0父向子傳參，子向父傳參，路由傳參 vue2.0路由-適合剛接觸新手簡單理解 vue2.0路由切換后頁面滾動位置不變BUG 解決vue2.0路由 TypeError: Cannot read property 'matched' of undefined 的錯誤問題 vue2.0：（五）、路由vue-router Vue2.0中的路由配置