vue2.0路由写法、传参和嵌套

前置知识请戳这里

 

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>

 

posted @ 2017-12-20 15:52  Z皓  阅读(2966)  评论(0)  编辑  收藏  举报