1. 路由嵌套和参数传递

传参的两种形式：

    a.查询字符串：login?name=tom&pwd=123

        {{$route.query}}

       ------ 

        <li><router-link to="/user/login?name=wushi&pass=123">用户登录</router-link></li>

        {{$route.query}}

    b.rest风格url：regist/alice/456

        {{$route.params}}

         <li><router-link to="/user/regist/qwe/123">用户注册</router-link></li>

         {{$route.params}}

    c.{{$route.path}}

    获取url路径

路由实例

router.push({path:'/home'})  添加路由，功能上与<route-link>相同

router.replace({path:'/home'}) 替换路由，不产生历史记录

完整示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="js/vue.js"></script>

    <script src="js/vue-router.js"></script>

    <title>Title</title>

</head>

<body>

<div id="app">

    <router-link to="/home">主页</router-link>

    <router-link to="/user">用户</router-link>

    <router-view></router-view>

    <button @click="push">添加路由</button>

    <button @click="push">替换路由</button>

</div>

<template id="user">

    <div>

        <h1>用户信息</h1>

        <ul>

            <li><router-link to="/user/regist/qwe/123">用户注册</router-link></li>

            <li><router-link to="/user/login?name=wushi&pass=123">用户登录</router-link></li>

        </ul>

        <router-view></router-view>

    </div>

</template>

</body>

<script>

    var home={

        template:'<h1>home</h1>'

    };

    var user={

        template:'#user'

    };

    let login={

        template:'<h1>登录中....{{$route.query}}</h1>'

    };

    let regist={

        template:"<h1>注册{{$route.params}}{{$route.path}}</h1>"

    }

    const routes1=[

        {path:'/home',component:home},

        {path:'/user',component:user,

        children:[

            {

            path: 'login',

            component: login,

            },

            {

             path:'regist/:username/:pass',

             component:regist

            }

        ]},

        // {path:'*',redirect:'/home'}

    ];

    const router = new VueRouter({

        routes:routes1,

    });

    new Vue({

        el:'#app',

        router,

        methods:{

            push(){

                router.push({path:'/home'})

            }

        }

    })

</script>

</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. Centos7下开启80端口

    firewall-cmd --zone=/tcp --permanent 命令含义:   --zone #作用域   --add-port=80/tcp  #添加端口,格式为:端口/通讯协议   -- ...

  2. IntelliJ IDEA汉化步骤以及乱码解决

    1.首先下载intellij idea 2017 汉化补丁 附上资源 链接: https://pan.baidu.com/s/1cHC76m 密码: q23m 2.解压该款汉化补丁到本地(我的资源不需 ...

  3. 【代码笔记】iOS-tableView滑动的范围函数

    //tableview滑动的范围 -(void)scrollViewDidScroll:(UIScrollView *)scrollView { myTableView.contentSize = C ...

  4. ASP.NET MVC WebAPI 资源整理

    注:这是收集给公司同事学习的资料,入门级别的. 使用ASP.Net WebAPI构建REST服务(一)——简单的示例 http://blog.csdn.net/mengzhengjie/article ...

  5. Python自动化开发之python的常用模块

    python常用模块 模块的种类:模块分为三种,分别是自定义模块:内置标准模块(即标准库):开源模块(第三方). 以下主要研究标准模块即标准库:标准库直接导入即可,不需要安装. 时间模块:time , ...

  6. Expo大作战(三十二)--expo sdk api之Noifications

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  7. Python笔记（十四）：操作excel openpyxl模块

    (一)  常遇到的情况 就我自己来说,常遇到的情况可能就下面几种: 读取excel整个sheet页的数据. 读取指定行.列的数据 往一个空白的excel文档写数据 往一个已经有数据的excel文档追加 ...

  8. Openjdk 安装 on centos7

    本文演示如何在CentOS7上安装openjdk. 1 准备工作 1.1 查看可安装的版本 $ yum -y list java-1.8* # 列出当前可用的安装版本 Available Packag ...

  9. MySQL修改编码为UTF-8无效果解决办法

    本来这是一件很简单的事,有很多博客里都有教程,但却足足花了我半天的时间才解决问题. 可能是因为我的MySQL安装时没有选择默认路径的原因,按照网上的教程修改了下图中的my.ini配置文件后编码并没有发 ...

  10. MySQL--eq_range_index_dive_limit参数学习,MYSQL 5.6 5.7处理数据分布不均的问题

    官方文档如下描述:This variable indicates the number of equality ranges in an equality comparison condition w ...