1. 路由嵌套和参数传递

  1. 传参的两种形式：
  2.     a.查询字符串：login?name=tom&pwd=123
  3.         {{$route.query}}
  4.        ------ 
  6.         <li><router-link to="/user/login?name=wushi&pass=123">用户登录</router-link></li>
  7.         {{$route.query}}
  9.     b.rest风格url：regist/alice/456
  10.         {{$route.params}}
  12.          <li><router-link to="/user/regist/qwe/123">用户注册</router-link></li>
  13.          {{$route.params}}
  15.     c.{{$route.path}}
  16.     获取url路径

路由实例

  1. router.push({path:'/home'})  添加路由，功能上与<route-link>相同
  2. router.replace({path:'/home'}) 替换路由，不产生历史记录

完整示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  6.     <script src="js/vue.js"></script>
  7.     <script src="js/vue-router.js"></script>
  8.     <title>Title</title>
  9. </head>
  10. <body>
  12. <div id="app">
  13.     <router-link to="/home">主页</router-link>
  14.     <router-link to="/user">用户</router-link>
  16.     <router-view></router-view>
  17.     <button @click="push">添加路由</button>
  18.     <button @click="push">替换路由</button>
  19. </div>
  21. <template id="user">
  22.     <div>
  23.         <h1>用户信息</h1>
  24.         <ul>
  25.             <li><router-link to="/user/regist/qwe/123">用户注册</router-link></li>
  26.             <li><router-link to="/user/login?name=wushi&pass=123">用户登录</router-link></li>
  27.         </ul>
  29.         <router-view></router-view>
  30.     </div>
  32. </template>
  34. </body>
  36. <script>
  37.     var home={
  38.         template:'<h1>home</h1>'
  39.     };
  40.     var user={
  41.         template:'#user'
  42.     };
  44.     let login={
  45.         template:'<h1>登录中....{{$route.query}}</h1>'
  46.     };
  47.     let regist={
  48.         template:"<h1>注册{{$route.params}}{{$route.path}}</h1>"
  49.     }
  50.     const routes1=[
  51.         {path:'/home',component:home},
  52.         {path:'/user',component:user,
  53.         children:[
  54.             {
  55.             path: 'login',
  56.             component: login,
  57.             },
  58.             {
  59.              path:'regist/:username/:pass',
  60.              component:regist
  61.             }
  62.         ]},
  63.         // {path:'*',redirect:'/home'}
  64.     ];
  65.     const router = new VueRouter({
  66.         routes:routes1,
  67.     });
  68.     new Vue({
  69.         el:'#app',
  70.         router,
  71.         methods:{
  72.             push(){
  73.                 router.push({path:'/home'})
  74.             }
  75.         }
  76.     })
  77. </script>
  79. </html>

vue学习路由嵌套的更多相关文章

  1. vue 多级路由嵌套后打开页面是空白

    在多层路由嵌套时,一级子目录必须有一个页面并且添加一具<router-view>,否则路由跳转页面为空,没有任何显示 来自为知笔记(Wiz)

  2. vue.js路由嵌套

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  3. vue之路由嵌套,子路由

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue.js路由嵌套传参

    通过配置路由时候按照: path:/user/:username/age/:age 这种就可以把参数传递 接受: $routes.params 接受到的是一个json格式的数据,

  5. Vue学习手记03-路由跳转与路由嵌套

    1.路由跳转 添加一个LearnVue.vue文件, 在router->index.js中 引入import Learn from '@/components/LearnVue' 在touter ...

  6. Vue学习笔记【28】——Vue路由（使用 children 属性实现路由嵌套）

    使用 children 属性实现路由嵌套   <div id="app">    <router-link to="/account"> ...

  7. vue2.0学习笔记之路由（二）路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue2.0学习笔记之路由（二）路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

随机推荐

  1. LeetCode链表相加-Python<二>

    上一篇:LeetCode两数之和-Python<一> 题目:https://leetcode-cn.com/problems/add-two-numbers/description/ 给定 ...

  2. php编程规范整理

    该规范对其他语言,部分是通用的标准....好吧,废话不多说啦,直入正题: 1.PHP 编程规范与编码习惯最主要的有以下几点: 1 文件说明 2 function 函数体说明 3 代码缩进 4 if省略 ...

  3. log4j.appender.file.DatePattern

    DailyRollingFileAppender是日志记录软件包Log4J中的一个Appender,它能够按一定的频度滚动日志记录文件. 我们可以按下面的方式配置DailyRollingFileApp ...

  4. webpack4 系列教程(二): 编译 ES6

    今天介绍webpack怎么编译ES6的各种函数和语法.敲黑板:这是webpack4版本哦, 有一些不同于webpack3的地方. >>> 本节课源码 >>> 所有课 ...

  5. 设计模式之享元模式（Flyweight）

    享元模式顾名思义就是羽量级模式或者蝇级模式,形容体量小的应用,该模式主要的设计目的是为了迎合系统大量相似数据的应用而生,减少用于创建和操作相似的细碎对象所花费的成本.大量的对象会消耗高内存,享元模式给 ...

  6. Python简单的网络编程

    OSI 模型介绍 应用层 -- 对接受的数据进行解释.加密与解密.压缩与解压缩 会话层 -- 通过传输层(端口号: 传输端口和接受端口) 建立数据传输的通路 传输层 -- 定义了一些传输数据的协议和端 ...

  7. [总结]jQuery之选择器集合

    jQuery 的选择器可谓之强大无比,常用的元素查找方法: $("#myELement") //选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是my ...

  8. 洛谷P3193 [HNOI2008]GT考试(dp 矩阵乘法)

    题意 题目链接 Sol 设\(f[i][j]\)表示枚举到位置串的第i位,当前与未知串的第j位匹配,那么我们只要保证在转移的时候永远不会匹配即可 预处理出已知串的每个位置加上某个字符后能转移到的位置, ...

  9. 【代码笔记】Web-ionic tab(选项卡)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  10. vue-cli脚手架之package.json

    package.json文件配置及其含义,这个是vue-cli自动生成的文件,先贴一张代码及其含义: { "name": "secondproject",//模 ...