前置知识请戳这里

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路由基本写法

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7.     <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <router-link to="/login">登录</router-link>
  12.       <router-link to="/register">注册</router-link>
  13.       <!--组件的显示占位域-->
  14.       <router-view></router-view>
  15.     </div>
  16.  
  17.     <script>
  18.       //1.0 准备组件
  19.       var App = Vue.extend({});
  20.  
  21.       var login = Vue.extend({
  22.         template: '<div><h3>登录</h3></div>'
  23.       });
  24.  
  25.       var register = Vue.extend({
  26.         template: '<div><h3>注册</h3></div>'
  27.       })
  28.  
  29.       //2.0 实例化路由规则对象
  30.       var router = new VueRouter({
  31.         routes: [{
  32.             path: '/login',
  33.             component: login
  34.           },
  35.           {
  36.             path: '/register',
  37.             component: register
  38.           },
  39.           {
  40.               path:'/',
  41.               //当路径为/时，重定向到/login
  42.               redirect:'/login'
  43.           }
  44.         ]
  45.       });
  46.  
  47.       //3.0 开启路由对象
  48.       new Vue({
  49.         el: '#app',
  50.         router: router
  51.       })
  52.     </script>
  53.   </body>
  54. </html>

vue2.0路由传参

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7.     <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <router-link to="/login">登录</router-link>
  12.       <router-link to="/register/value">注册</router-link>
  13.       <!--组件的显示占位域-->
  14.       <router-view></router-view>
  15.     </div>
  16.  
  17.     <script>
  18.       //1.0 准备组件
  19.       var App = Vue.extend({});
  20.  
  21.       var login = Vue.extend({
  22.         template: '<div><h3>登录</h3></div>'
  23.       });
  24.  
  25.       var register = Vue.extend({
  26.         template: '<div><h3>注册{{name}}</h3></div>',
  27.         data:function(){
  28.             return {
  29.                 name:''
  30.             }
  31.         },
  32.         created:function(){
  33.             this.name = this.$route.params.name;
  34.         }
  35.       });
  36.  
  37.       //2.0 实例化路由规则对象
  38.       var router = new VueRouter({
  39.         routes: [{
  40.             path: '/login',
  41.             component: login
  42.           },
  43.           {
  44.             path: '/register/:name',
  45.             component: register
  46.           },
  47.           {
  48.               path:'/',
  49.               //当路径为/时，重定向到/login
  50.               redirect:'/login'
  51.           }
  52.         ]
  53.       });
  54.  
  55.       //3.0 开启路由对象
  56.       new Vue({
  57.         el: '#app',
  58.         router: router
  59.       })
  60.     </script>
  61.   </body>
  62. </html>

vue2.0路由嵌套

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7.     <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <router-link to="/account/login">登录</router-link>
  12.       <router-link to="/account/register">注册</router-link>
  13.       <!--组件的显示占位域-->
  14.       <router-view></router-view>
  15.     </div>
  16.  
  17.     <script>
  18.       //1.0 准备组件
  19.       var App = Vue.extend({});
  20.  
  21.       var account = Vue.extend({
  22.         template: '<div><h1>账号组件</h1><router-view></router-view></div>'
  23.       });
  24.  
  25.       var login = Vue.extend({
  26.         template: '<div><h3>登录</h3></div>'
  27.       });
  28.  
  29.       var register = Vue.extend({
  30.         template: '<div><h3>注册</h3></div>'
  31.       });
  32.  
  33.       //2.0 实例化路由规则对象
  34.       var router = new VueRouter({
  35.         routes: [{
  36.           path: '/account',
  37.           component: account,
  38.           children: [{
  39.               path: 'login',
  40.               component: login
  41.             },
  42.             {
  43.               path: 'register',
  44.               component: register
  45.             }
  46.           ]
  47.         }]
  48.       });
  49.  
  50.       //3.0 开启路由对象
  51.       new Vue({
  52.         el: '#app',
  53.         router: router
  54.       })
  55.     </script>
  56.   </body>
  57. </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. C#之集合

    数组(http://www.cnblogs.com/afei-24/p/6738128.html)的大小是固定的.如果元素的个数是动态的,就应使用集合类. 列表(http://www.cnblogs. ...

  2. [转] Citrix XenDesktop桌面登录VM提示Citrix Web插件错误

    [From] http://blog.51cto.com/xuhaili100love/1223707 [适用版本] 适用所有Citrix虚拟桌面版本 [现象描述] 使用SC登录虚拟机提示“无法访问您 ...

  3. 使用webbench工具测试网站访问压力

    介绍 Webbench是一个在Linux下使用的网站压测工具.它使用fork()模拟多个客户端 同时访问我们设定的URL,测试网站在压力下工作的性能, 最多可以模拟3万个并发连接去测试网站的负载能力. ...

  4. AHB协议

    AHB2 支持多个Bus Master,例如有三个Master,有四个slave,但是同时只有一个Mater可以拿到Bus的访问权.所以,总线的使用权就需要Master去申请,也就需要一个仲裁器(Ar ...

  5. Weblogic反序列化远程命令执行漏洞(CNVD-C-2019-48814)测试

    漏洞简介 2018年4月18日,Oracle官方发布了4月份的安全补丁更新CPU(Critical Patch Update),更新中修复了一个高危的 WebLogic 反序列化漏洞CVE-2018- ...

  6. docker 把容器commit成镜像

    该方法是使用docker commit 命令,其命令格式为:  docker commit [OPTIONS] CONTAINER [REPOSITORY[:TAG]] 主要参数选项包括: -a ,– ...

  7. C#串口通讯中常用的16进制的字节转换

    1.对于通讯协议的十六进制数值进行简单转换 //二进制转十进制Console.WriteLine("二进制 111101 的十进制表示: "+Convert.ToInt32(&qu ...

  8. 查找Ubuntu下包的归属

    今天在制作docker时,发现我的程序有些依赖的包不太好找应该安装什么. 在centos下面,可以用命令: rpm -qf <libraryname> 在Ubuntu下面,发现一个网站基本 ...

  9. python 流式游标读取mysql大型数据库

    import asyncio import aiomysql async def dbdaochu(loop): sqlstr='sql' conn = await aiomysql.connect( ...

  10. Unity c#反射查找类中符合条件的方法并执行

    我用在了事件注册上面,再也不用一个一个去写了 下面直接上代码 using System; using System.Collections; using System.Collections.Gene ...