spa单页开发及vue-router基础: https://www.cnblogs.com/iiiiiher/p/9034496.html

url两种传参方式

  • query: $route.query
  1. http://localhost:63342/login?name=maotai&age=22
  • params: $route.params
  1. http://localhost:63342/login/maotai/22

引入router组件后, vm里注册router,会在vm实例上新增router属性

基础路由 匹配规则tag激活类

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .active{
  8.             color: yellowgreen;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <div id="app">
  14.     <router-link to="/login" tag="button">login</router-link>
  15.     <router-link to="/register">register</router-link>
  16.     <router-view></router-view>
  17. </div>
  19. <template id="login">
  20.     <div>login</div>
  21. </template>
  22. <template id="register">
  23.     <div>register</div>
  24. </template>
  25. <script src="node_modules/vue/dist/vue.js"></script>
  26. <script src="node_modules/vue-router/dist/vue-router.js"></script>
  27. <script>
  28.   let login = {
  29.     template: "#login",
  30.   };
  31.   let register = {
  32.     template: "#register",
  33.   };
  35.   let routes = [
  36.     {path: '/', redirect: '/login'},
  37.     {path: '/login', component: login},
  38.     {path: '/register', component: register},
  39.     {path: '/*', redirect: '/login'},
  40.   ];
  41.   let router = new VueRouter({
  42.     routes,
  43.     linkActiveClass: 'active',
  44.   });
  45.   let vm = new Vue({
  46.     el: "#app",
  47.     data: {},
  48.     router,
  49.   })
  50. </script>
  51. </body>
  52. </html>

路由参数获取

query方式

  1. <div id="app">
  2.     <router-link to="/login?name=maotai&age=22">login</router-link>
  3.     <router-link to="/register">register</router-link>
  4.     <router-view></router-view>
  5. </div>
  6. <script src="node_modules/vue/dist/vue.js"></script>
  7. <script src="node_modules/vue-router/dist/vue-router.js"></script>
  8. <script>
  9.   let login = {
  10.     template: "<h1>登录 -- {{$route.query.name}}</h1>",
  11.     created() {
  12.       console.log(this.$route);
  13.     }
  14.   };
  15.   let register = {
  16.     template: "<h1>注册</h1>"
  17.   };
  18.   let routes = [
  19.     {path: '/login', component: login},
  20.     {path: '/register', component: register},
  21.   ];
  22.   let router = new VueRouter({
  23.     routes
  24.   });
  25.   let vm = new Vue({
  26.     el: '#app',
  27.     data: {},
  28.     router,
  29.   })
  30. </script>

param方式获取参数值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .active {
  8.             color: yellowgreen;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <div id="app">
  14.     <router-link to="/login/maotai/22" tag="button">login</router-link>
  15.     <router-link to="/register">register</router-link>
  16.     <router-view></router-view>
  17. </div>
  19. <template id="login">
  20.     <div>login {{$route.params.name}} -- {{$route.params.age}}</div>
  21. </template>
  22. <template id="register">
  23.     <div>register</div>
  24. </template>
  25. <script src="node_modules/vue/dist/vue.js"></script>
  26. <script src="node_modules/vue-router/dist/vue-router.js"></script>
  27. <script>
  28.   let login = {
  29.     template: "#login",
  30.     created() {
  31.       console.log(1, this.$route);
  32.     }
  33.   };
  34.   let register = {
  35.     template: "#register",
  36.   };
  38.   let routes = [
  39.     {path: '/login/:name/:age', component: login},
  40.     {path: '/register', component: register},
  41.   ];
  42.   let router = new VueRouter({
  43.     routes,
  44.     linkActiveClass: 'active',
  45.   });
  46.   let vm = new Vue({
  47.     el: "#app",
  48.     data: {},
  49.     router,
  50.   })
  51. </script>
  52. </body>
  53. </html>

路由嵌套-children 子路由

三级菜单

  • 错误的写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <router-link to="/account">account</router-link>
  11.     <router-view></router-view>
  12. </div>
  14. <template id="account">
  15.     <div>
  16.         <h1>这是account组件</h1>
  17.         <router-link to="/account/login">login</router-link>
  18.         <router-link to="/account/register">register</router-link>
  19.         <router-view></router-view>
  20.     </div>
  21. </template>
  23. <template id="login">
  24.     <div>login</div>
  25. </template>
  27. <template id="register">
  28.     <div>register</div>
  29. </template>
  30. <script src="node_modules/vue/dist/vue.js"></script>
  31. <script src="node_modules/vue-router/dist/vue-router.js"></script>
  32. <script>
  33.   let account = {
  34.     template: "#account",
  35.   };
  36.   let login = {
  37.     template: "#login",
  38.     created() {
  39.       console.log(1, this.$route);
  40.     }
  41.   };
  42.   let register = {
  43.     template: "#register",
  44.   };
  46.   let routes = [
  47.     {path: '/account', component: account},
  48.     {path: '/account/login', component: login},
  49.     {path: '/account/register', component: register},
  50.   ];
  51.   let router = new VueRouter({
  52.     routes,
  53.   });
  54.   let vm = new Vue({
  55.     el: "#app",
  56.     data: {},
  57.     router,
  58.   })
  59. </script>
  60. </body>
  61. </html>
  • 正确的姿势

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <router-link to="/account">account</router-link>
  11.     <router-view></router-view>
  12. </div>
  14. <template id="account">
  15.     <div>
  16.         <h1>这是account组件</h1>
  17.         <router-link to="/account/login">login</router-link>
  18.         <router-link to="/account/register">register</router-link>
  19.         <router-view></router-view>
  20.     </div>
  21. </template>
  23. <template id="login">
  24.     <div>login</div>
  25. </template>
  27. <template id="register">
  28.     <div>register</div>
  29. </template>
  30. <script src="node_modules/vue/dist/vue.js"></script>
  31. <script src="node_modules/vue-router/dist/vue-router.js"></script>
  32. <script>
  33.   let account = {
  34.     template: "#account",
  35.   };
  36.   let login = {
  37.     template: "#login",
  38.     created() {
  39.       console.log(1, this.$route);
  40.     }
  41.   };
  42.   let register = {
  43.     template: "#register",
  44.   };
  46.   let routes = [
  47.     {
  48.       path: '/account',
  49.       component: account,
  50.       children: [
  51.         {path: 'login', component: login},
  52.         {path: 'register', component: register},
  53.       ],
  54.     },
  55.   ];
  56.   let router = new VueRouter({
  57.     routes,
  58.   });
  59.   let vm = new Vue({
  60.     el: "#app",
  61.     data: {},
  62.     router,
  63.   })
  64. </script>
  65. </body>
  66. </html>

router-view name属性: 给router-view命名-实现经典布局

一个/下同时展示多个组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         .header {
  8.             background-color: lavender;
  9.         }
  11.         .main {
  12.             display: flex;
  13.             height: 600px;
  14.         }
  16.         .main .side {
  17.             flex: 2;
  18.             background-color: gray;
  19.         }
  21.         .main .content {
  22.             flex: 8;
  23.             background-color: lightpink;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28. <div id="app">
  29.     <router-view></router-view>
  30.     <div class="main">
  31.         <router-view name="side"></router-view>
  32.         <router-view name="content"></router-view>
  33.     </div>
  34. </div>
  36. <template id="register">
  37.     <div>register</div>
  38. </template>
  40. <script src="node_modules/vue/dist/vue.js"></script>
  41. <script src="node_modules/vue-router/dist/vue-router.js"></script>
  42. <script>
  43.   let header = {
  44.     template: "<div class='header'>header</div>",
  45.   };
  46.   let side = {
  47.     template: "<div class='side'>side</div>",
  48.   };
  49.   let content = {
  50.     template: "<div class='content'>content</div>",
  51.   };
  53.   let routes = [
  54.     {
  55.       path: '/', components: {
  56.         default: header,
  57.         side: side,
  58.         content: content,
  59.       }
  60.     }
  61.   ];
  62.   let router = new VueRouter({
  63.     routes,
  64.   });
  66.   let vm = new Vue({
  67.     el: "#app",
  68.     router,
  69.   })
  70. </script>
  71. </body>
  72. </html>

router-link的位置和router-view的位置可以不再一起

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <p>
  10.         <router-link to="/user/foo">/user/foo</router-link>
  11.         <router-link to="/user/foo/profile">/user/foo/profile</router-link>
  12.         <router-link to="/user/foo/posts">/user/foo/posts</router-link>
  13.     </p>
  14.     <router-view></router-view>
  15. </div>
  17. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  18. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  19. <script>
  20.     const User = {
  21.         template: `
  22.             <div class="user">
  23.               <h2>User {{ $route.params.id }}</h2>
  24.               <router-view></router-view>
  25.             </div>`
  26.     };
  28.     const UserHome = {template: '<div>Home</div>'};
  29.     const UserProfile = {template: '<div>Profile</div>'};
  30.     const UserPosts = {template: '<div>Posts</div>'};
  32.     const router = new VueRouter({
  33.         routes: [
  34.             {
  35.                 path: '/user/:id', component: User,
  36.                 children: [
  37.                     // UserHome will be rendered inside User's <router-view>
  38.                     // when /user/:id is matched
  39.                     {path: '', component: UserHome},
  41.                     // UserProfile will be rendered inside User's <router-view>
  42.                     // when /user/:id/profile is matched
  43.                     {path: 'profile', component: UserProfile},
  45.                     // UserPosts will be rendered inside User's <router-view>
  46.                     // when /user/:id/posts is matched
  47.                     {path: 'posts', component: UserPosts}
  48.                 ]
  49.             }
  50.         ]
  51.     });
  52.     const app = new Vue({router}).$mount('#app')
  53. </script>
  54. </body>
  55. </html>
  1. 子组件
  2. 子路由
  4. 动态路由
  5. 命名视图

路由综合例子

参考:

https://jsfiddle.net/posva/22wgksa3/

点settings显示2个导航, 点profile导航, 显示2个组件.

ps: 这点对理解vue-router非常重要.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <div id="app">
  10.     <router-view></router-view>
  11. </div>
  12. <template id="mysettings">
  13.     <div>
  14.         <p>mysettings</p>
  15.         <router-link to="/mysettings/email">/mysettings/email</router-link>
  16.         <router-link to="/mysettings/profile">/mysettings/profile</router-link>
  18.         <router-view></router-view>
  19.         <router-view name="profilepreview"></router-view>
  20.     </div>
  21. </template>
  23. <template id="email">
  24.     <div>
  25.         <p>email</p>
  26.     </div>
  27. </template>
  28. <template id="profileedit">
  29.     <div>
  30.         <p>profileedit</p>
  31.     </div>
  32. </template>
  34. <template id="profilepreview">
  35.     <div>
  36.         <p>profilepreview</p>
  37.     </div>
  38. </template>
  40. <script src="node_modules/vue/dist/vue.js"></script>
  41. <script src="node_modules/vue-router/dist/vue-router.js"></script>
  42. <script>
  43.     let mysettings = {
  44.         template: "#mysettings"
  45.     };
  46.     let email = {
  47.         template: "#email"
  48.     };
  50.     let profileedit = {
  51.         template: "#profileedit"
  52.     };
  53.     let profilepreview = {
  54.         template: "#profilepreview"
  55.     };
  56.     let routes = [
  57.         {
  58.             path: '/mysettings', component: mysettings, children: [
  59.                 {path: 'email', component: email},
  60.                 {
  61.                     path: 'profile', components: {
  62.                         default: profileedit,
  63.                         profilepreview: profilepreview
  64.                     }
  65.                 },
  66.             ]
  67.         }
  68.     ];
  69.     let router = new VueRouter({routes});
  70.     let vm = new Vue({
  71.         el: "#app",
  72.         router,
  73.     })
  74. </script>
  75. </body>
  76. </html>

[vue]vue路由篇vue-router的更多相关文章

  1. 前端vue系列-起始篇 vue的基本认知

    hi,大家伙,我是佛系大大,很高兴与你们一起沟通,学习,进步. 很久不更新博客了,现在回来再写博客,尽然是有些怀念的感觉,幸福的感觉.因为写博客,内心会很宁静,沉浸在自己的世界中,是很幸福的一件事.当 ...

  2. vue 快速入门 系列 —— vue loader 扩展

    其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...

  3. vue学习指南：第十一篇(详细) - Vue的 路由 第一篇 ( router )

    一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...

  4. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  5. Vue的路由Router之导航钩子和元数据及匹配

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  h ...

  6. Vue回炉重造之router路由（更新中）

    安装vue-router npm i vue-router -S 配置1.创建文件夹与文件 创建一个router文件夹,在文件夹中创建两个文件,分别是router.js和routes.js文件.2.编 ...

  7. 分享一篇vue项目规范

    最近 Vue 用的比较多,而且因为公司里有实习生,当几个人写一个项目的时候,会出现很多问题,最麻烦的就是规范不统一,之前我有一篇文章是说, vue 是比较有规范的一种框架了,但是也会出现很多问题,所以 ...

  8. Vue番外篇 -- vue-router浅析原理

    近期被问到一个问题,在你们项目中使用的是Vue的SPA(单页面)还是Vue的多页面设计? 这篇文章主要围绕Vue的SPA单页面设计展开. 关于如何展开Vue多页面设计请点击查看. 官网vue-rout ...

  9. vue权限路由实现方式总结二

    之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...

  10. Vue结合路由配置递归实现菜单栏

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

随机推荐

  1. sencha touch 百度地图扩展(2014-12-17)

    上个版本http://www.cnblogs.com/mlzs/p/3666466.html,新增了一些功能,修复了一些bug 扩展代码如下: Ext.define('ux.BMap', { alte ...

  2. 【CF679D】Bear and Chase 最短路+乱搞

    [CF679D]Bear and Chase 题意:近日,鼠国的头号通缉犯,神出鬼没的怪盗——Joker正于摩登市出没!对于名侦探Jack来说,这正是将其捉拿归案的大号时机.形式化地,摩登市可以看成一 ...

  3. web站点健康检测和告警小脚本

    #!/bin/sh web01="http://172.18.52.xx:8080/web/api/getTime" web02="http://172.18.52.xx ...

  4. 搞懂MapReduce

    MapReduce的主要思想就是将计算任务分发至多台计算机(slave),然后master综合计算机结果.所以就涉及到多台计算机通信和同步的问题,这个应该由hadoop完成,把环境配置好后就像单机操作 ...

  5. 通过USB转TTL串口下载stm32程序

    目录: 1.硬件及其接线 2.驱动及软件 3.下载程序测试 1.硬件及其接线 1.1 USB转TTL刷机板(CH340模块升级小板) 1.2 主芯片STM32F103C8T6开发板 1.3接线 1.3 ...

  6. Android所有Demo资源汇总，太全了(申明：来源于网络)

    Android所有Demo资源汇总,太全了(申明:来源于网络) 地址:http://bbs.csdn.net/topics/391928947

  7. Xshell设置网络设备自动登录

    使用Xshell登录网络设备时候需要手动输入用户名和密码 设置免输入用户名及密码 用户名 密码 再次登录就不需要手动输入用户名和密码了

  8. echarts pie 图表当名称太长时

    当饼图的名称太长时,只显示几个字符,其余的... let use; use.setOption({ tooltip: { trigger: 'item', formatter: "{a} & ...

  9. CCPC-Wannafly Winter Camp Day3 Div1 - 精简改良 - [生成树][状压DP]

    题目链接:https://zhixincode.com/contest/14/problem/D?problem_id=206 样例输入 1  5 5 1 2 1 1 3 1 2 4 1 2 5 1 ...

  10. Chap8：加密货币TOP100[《区块链中文词典》维京&甲子]

    根据2018年1月15日CoinMarketCap的加密货币市值排名编写,这里介绍TOP10,具体请参考<区块链中文词典>维京&甲子 01.比特币/Bitcoin/BTC 一种点对 ...