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. [PHP]算法- 判断是否为二叉搜索树的后序遍历序列的PHP实现

    二叉搜索树的后序遍历序列: 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 思路: 1.后序遍历是 左右中 ...

  2. 【Mybatis】1、Mybatis拦截器学习资料汇总

    MyBatis拦截器原理探究 http://www.cnblogs.com/fangjian0423/p/mybatis-interceptor.html [myBatis]Mybatis中的拦截器 ...

  3. CSS之Normalize.css的使用（重置表）

    本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在 ...

  4. 安卓开发_浅谈TimePicker（时间选择器）

    TimePicker也继承自FrameLayout类.时间选择控件向用户显示一天中的时间(可以为24小时,也可以为AM/PM制),并允许用户进行选择.如果要捕获用户修改时间数据的事件,便需要为Time ...

  5. Angular2 富文本编辑器 ng2-ckeditor 的使用

    本文介绍如何在 Angular 中使用 ng2-ckeditor 控件,示例代码基于 angular 6.0.2,node 8.11.2,  ng2-ckeditor 4.9.2 环境   1. 安装 ...

  6. QQ浏览器兼容模式问题

    今天客户反馈有个问题,他说用360浏览器的兼容模式无法登陆系统,我试了可以,接着试了IE11,也可以,然后跟经理汇报,他说他用qq浏览器兼容模式就不可以,于是我试了,果然不可以... 问题是酱紫的:输 ...

  7. PHP类多继承的替代方案Traits

    概述 traits是PHP5.4新进入的特性,其目的就是解决PHP的类不能多继承的问题.Traits不是类!不能被实例化.可以理解为一组能被不同的类都能调用到的方法集合.只需要在类中使用关键词use引 ...

  8. 服务器较稳妥的磁盘阵列方案：RAID5+热备盘

    最近公司这边要整个数据中心,但是我们这边磁盘阵列的方案选择方面需要做好万全的测试 内部测试的服务器当初损坏的磁盘1个做的raid5直接换个新磁盘做替换rebuild就行了 但是现在想的方法是5+1的方 ...

  9. Qt实现同步（阻塞式）http get等网络访问操作

    Qt的网络操作类是异步(非阻塞的),但有时想做一些阻塞的事情就不方便了,可用如下几行代码轻松实现: QByteArray MyNetworkAccess::get(const QString & ...

  10. February 5th, 2018 Week 6th Monday

    The world is what it is; men who are nothing, who allow themselves to become nothing, have no place ...