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. RBAC 权限设计（转载）

    来源 :https://blog.csdn.net/rocher88/article/details/43190743 这是我在网上找的一些设计比较好的RBAC权限管理 不知道,像新浪.搜狐.网易.百 ...

  2. 【Spring】1、Spring 中的监听器 Listener

    一.接口 1.EventListener 2.HttpSessionAttributeListener   继承EventListener接口 HttpSessionAttributeListener ...

  3. Java-IO：复制文件

    import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStrea ...

  4. 关于在WP8.1中使用剪贴板的问题

    熟悉WindowsPhone8.0和WindowsPhone8.1开发的朋友都应该很清楚,在windowphone8.0的 开发时代下,我们可以很轻松的使用系统提供的API进行简单的文本拷贝和复制.但 ...

  5. fetch发送Form Data请求并携带cookie

    今天我们来说说如何fetch发送Form Data请求并携带cookie,直接进入正题好吧,别问我今天为啥不在开始吹两句了,累到一句牛逼不想吹...... 步骤1: 设置头部,"Conten ...

  6. 【代码笔记】Web-ionic-创建APP的架构

    一,创建app的时候,index.html的主要架构. <!DOCTYPE html> <html> <head> <meta charset="u ...

  7. VUE路由转场特效，WebAPP的前进与后退

    一.效果图 二.思路 1. 定义两个 CSS 过度动画,前进与后退: slide-right-enter   和   slide-left-enter 2. 给路由配置meta信息,设置各个路由的级别 ...

  8. Android View 绘制流程

    Android 中 Activity 是作为应用程序的载体存在,代表着一个完整的用户界面,提供了一个窗口来绘制各种视图,当 Activity 启动时,我们会通过 setContentView 方法来设 ...

  9. Java JVM监控工具JConsole简介

    Java JVM监控工具JConsole简介 jconsole命令 功能:打开java监视管理控制台 方法: jconsole [选项1] [选项2] …… [选项n] 常用选项: -help     ...

  10. 小技巧-mac修改finder菜单栏

    效果: 方法: 添加:打开finder后,长按command,可以将其他app拖到菜单栏. 删除:同理,长按command,将不需要的图标拖出菜单栏即可. PS:强烈推荐gotoshell这个小工具, ...