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. c# 数字之间的计算

    1.c# 65*1.0F/102=0.637254901960784 2.mysql TRUNCATE(65/102,9)  9代表的是保留几位小数 3.多张表关联,修改某张表的字段 UPDATE s ...

  2. 撩课-Java每天5道面试题第17天

    116.说下Struts的设计模式 MVC模式: web应用程序启动时 就会加载并初始化ActionServler. 用户提交表单时, 一个配置好的ActionForm对象被创建, 并被填入表单相应的 ...

  3. 无法安装程序包MiniProfiler

    抱歉,之前给错了解决问题的答案,今天来修改一下,时间:2018年9月25日23:19:02错误 无法安装程序包“MiniProfiler.EF6 4.0.138”.你正在尝试将此程序包安装到目标为“. ...

  4. 【读书笔记】iOS-多点触摸事件与界面几何

    边缘与中心检测: CGRectGetMinX 返回矩形左边缘的坐标. CGRectGetMinY 返回矩形底部边缘的坐标. CGRectGetMidX 返回矩形中心的x坐标. CGRectGetMid ...

  5. IDEA项目搭建十一——添加拦截器、忽略URL大小写、启动事件

    程序启动时如果需要添加某些初始化代码可以使用以下事件处理 import org.springframework.context.ApplicationEvent; import org.springf ...

  6. Linux 学习笔记之超详细基础linux命令(the end)

    Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 14---------------- ...

  7. js,H5本地存储

    //存储本地存储----setItem(存储名称,数据名称) var c={name:"man",sex:"woman"}; localStorage.setI ...

  8. Android--判断listview上下滑动的方法

    elv_music_res_fragment.setOnScrollListener(new AbsListView.OnScrollListener() { private int mLastFir ...

  9. MSSQL一种取代游标的方案

    今天看到一篇文章写的自己整理记录下,据说比用游标快. DECLARE @字段1 数据类型; DECLARE @字段2 数据类型; DECLARE @TMP_WHILE_ID INT; ,),TMP_W ...

  10. Android QMI机制

    android QMI机制---概论 android QMI机制---QMUX android QMI机制---Qcril初始化流程 android QMI机制---QCRIL消息发送 android ...