前置知识请戳这里

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>

vue2.0路由写法、传参和嵌套的更多相关文章

  1. Vue学习之路由vue-router传参及嵌套小结（十）

    一.路由传递参数: 1.使用query传值: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. vue2.0路由写法

    // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter) // 1. 定义(路由)组件. // 可以从其他文件 import 进来 var Fo ...

  3. VueJs(11)---vue-router（命名路由，命名视图，重定向别名，路由组件传参）

    vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...

  4. Vue-admin工作整理（四）：路由组件传参

    路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...

  5. vue2.0路由

    现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...

  6. vue2.0路由-路由嵌套

    vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...

  7. vue2.0路由变化1

    路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...

  8. vue2.0路由进阶

    一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可 ...

  9. vue-router路由动态传参query和params的区别

    1.query方式传参和接收参数 //路由 { path: '/detail', //这里不需要参入参数 name: "detail", component: detail//这个 ...

随机推荐

  1. 动态树Link-cut tree(LCT)总结

    动态树是个好玩的东西 LCT题集 预备知识 Splay 树链剖分(好像关系并不大) 动态树(Link-cut tree) 先搬dalao博客 什么是LCT? 动态树是一类要求维护森林的连通性的题的总称 ...

  2. wx.config失败

    wx.config({ debug: false, appId: _appId, timestamp: _timestamp, nonceStr: _nonceStr, signature: _sig ...

  3. [转] shell逻辑运算总结, 包括[[]]与[]的区别，&&与-a的区别，||与-o的区别

    [From] https://www.cnblogs.com/tony1314/p/8315666.html 1. 关于文件和目录 -f  判断某普通文件是否存在 -d  判断某目录是否存在 -b  ...

  4. Ntp客户端

    function parseMsg (buffer) { if (buffer.length !== 48) return; const pkt = {}, now = new Date().getT ...

  5. Django Rest Framework（阿奇）

    Django Rest Framework 一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中 ...

  6. docker 把镜像打包成文件

    保存镜像为文件 docker save -o 要保存的文件名 要保存的镜像 举例: [root@iZbp16cdvzk4rhl0vn1gedZ ~]# ls aaa.cap install.sh mo ...

  7. 换个角度看Salesforce之基础配置学习笔记(二)

    1. 登录后无法使用Developer Console? 先找到当前登录用户的Profie,然后勾选Profile中的View All Data(Modify All Data)即可: 2. Pers ...

  8. CSAPP阅读笔记-汇编语言初探(控制类指令)-来自第三章3.6的笔记-P135-P163

    1.正溢出与负溢出: 首先,一个正数与一个负数相加,不可能溢出,因为结果的绝对值一定小于两个加数的绝对值,既然两个加数能合理表示出来,结果一定也能合理表示出来. 其次,正溢出是由于两个很大的正数相加, ...

  9. 浅谈Cordova优缺点与环境部署(转载)

    浅谈Cordova优缺点与环境部署 作者:苏华杰 简介 Cordova是一个用基于HTML.CSS和JavaScript的,用于创建跨平台移动应用程序的快速开发平台.它使开发者能够利用iPhone.A ...

  10. mysql 必知必会总结

    以前 mysql 用的不是很多, 2 天看了一遍 mysql 必知必会又复习了一下基础.  200 页的书,很快就能看完, 大部分知识比较基础, 但还是了解了一些以前不知道的知识点.自己做一个备份,随 ...