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

时间：2023-12-26 14:49:07

前置知识请戳这里

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>

相关文章