spa单页开发及vue-router基础: https://www.cnblogs.com/iiiiiher/p/9034496.html

url两种传参方式

  • query: $route.query
http://localhost:63342/login?name=maotai&age=22
  • params: $route.params
http://localhost:63342/login/maotai/22

引入router组件后, vm里注册router,会在vm实例上新增router属性

基础路由 匹配规则tag激活类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .active{

            color: yellowgreen;

        }

    </style>

</head>

<body>

<div id="app">

    <router-link to="/login" tag="button">login</router-link>

    <router-link to="/register">register</router-link>

    <router-view></router-view>

</div>

<template id="login">

    <div>login</div>

</template>

<template id="register">

    <div>register</div>

</template>

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

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

<script>

  let login = {

    template: "#login",

  };

  let register = {

    template: "#register",

  };

  let routes = [

    {path: '/', redirect: '/login'},

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

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

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

  ];

  let router = new VueRouter({

    routes,

    linkActiveClass: 'active',

  });

  let vm = new Vue({

    el: "#app",

    data: {},

    router,

  })

</script>

</body>

</html>

路由参数获取

query方式

<div id="app">

    <router-link to="/login?name=maotai&age=22">login</router-link>

    <router-link to="/register">register</router-link>

    <router-view></router-view>

</div>

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

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

<script>

  let login = {

    template: "<h1>登录 -- {{$route.query.name}}</h1>",

    created() {

      console.log(this.$route);

    }

  };

  let register = {

    template: "<h1>注册</h1>"

  };

  let routes = [

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

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

  ];

  let router = new VueRouter({

    routes

  });

  let vm = new Vue({

    el: '#app',

    data: {},

    router,

  })

</script>

param方式获取参数值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .active {

            color: yellowgreen;

        }

    </style>

</head>

<body>

<div id="app">

    <router-link to="/login/maotai/22" tag="button">login</router-link>

    <router-link to="/register">register</router-link>

    <router-view></router-view>

</div>

<template id="login">

    <div>login {{$route.params.name}} -- {{$route.params.age}}</div>

</template>

<template id="register">

    <div>register</div>

</template>

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

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

<script>

  let login = {

    template: "#login",

    created() {

      console.log(1, this.$route);

    }

  };

  let register = {

    template: "#register",

  };

  let routes = [

    {path: '/login/:name/:age', component: login},

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

  ];

  let router = new VueRouter({

    routes,

    linkActiveClass: 'active',

  });

  let vm = new Vue({

    el: "#app",

    data: {},

    router,

  })

</script>

</body>

</html>

路由嵌套-children 子路由

三级菜单

  • 错误的写法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <router-link to="/account">account</router-link>

    <router-view></router-view>

</div>

<template id="account">

    <div>

        <h1>这是account组件</h1>

        <router-link to="/account/login">login</router-link>

        <router-link to="/account/register">register</router-link>

        <router-view></router-view>

    </div>

</template>

<template id="login">

    <div>login</div>

</template>

<template id="register">

    <div>register</div>

</template>

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

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

<script>

  let account = {

    template: "#account",

  };

  let login = {

    template: "#login",

    created() {

      console.log(1, this.$route);

    }

  };

  let register = {

    template: "#register",

  };

  let routes = [

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

    {path: '/account/login', component: login},

    {path: '/account/register', component: register},

  ];

  let router = new VueRouter({

    routes,

  });

  let vm = new Vue({

    el: "#app",

    data: {},

    router,

  })

</script>

</body>

</html>
  • 正确的姿势

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <router-link to="/account">account</router-link>

    <router-view></router-view>

</div>

<template id="account">

    <div>

        <h1>这是account组件</h1>

        <router-link to="/account/login">login</router-link>

        <router-link to="/account/register">register</router-link>

        <router-view></router-view>

    </div>

</template>

<template id="login">

    <div>login</div>

</template>

<template id="register">

    <div>register</div>

</template>

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

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

<script>

  let account = {

    template: "#account",

  };

  let login = {

    template: "#login",

    created() {

      console.log(1, this.$route);

    }

  };

  let register = {

    template: "#register",

  };

  let routes = [

    {

      path: '/account',

      component: account,

      children: [

        {path: 'login', component: login},

        {path: 'register', component: register},

      ],

    },

  ];

  let router = new VueRouter({

    routes,

  });

  let vm = new Vue({

    el: "#app",

    data: {},

    router,

  })

</script>

</body>

</html>

router-view name属性: 给router-view命名-实现经典布局

一个/下同时展示多个组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style>

        .header {

            background-color: lavender;

        }

        .main {

            display: flex;

            height: 600px;

        }

        .main .side {

            flex: 2;

            background-color: gray;

        }

        .main .content {

            flex: 8;

            background-color: lightpink;

        }

    </style>

</head>

<body>

<div id="app">

    <router-view></router-view>

    <div class="main">

        <router-view name="side"></router-view>

        <router-view name="content"></router-view>

    </div>

</div>

<template id="register">

    <div>register</div>

</template>

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

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

<script>

  let header = {

    template: "<div class='header'>header</div>",

  };

  let side = {

    template: "<div class='side'>side</div>",

  };

  let content = {

    template: "<div class='content'>content</div>",

  };

  let routes = [

    {

      path: '/', components: {

        default: header,

        side: side,

        content: content,

      }

    }

  ];

  let router = new VueRouter({

    routes,

  });

  let vm = new Vue({

    el: "#app",

    router,

  })

</script>

</body>

</html>

router-link的位置和router-view的位置可以不再一起

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <p>

        <router-link to="/user/foo">/user/foo</router-link>

        <router-link to="/user/foo/profile">/user/foo/profile</router-link>

        <router-link to="/user/foo/posts">/user/foo/posts</router-link>

    </p>

    <router-view></router-view>

</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>

    const User = {

        template: `

            <div class="user">

              <h2>User {{ $route.params.id }}</h2>

              <router-view></router-view>

            </div>`

    };

    const UserHome = {template: '<div>Home</div>'};

    const UserProfile = {template: '<div>Profile</div>'};

    const UserPosts = {template: '<div>Posts</div>'};

    const router = new VueRouter({

        routes: [

            {

                path: '/user/:id', component: User,

                children: [

                    // UserHome will be rendered inside User's <router-view>

                    // when /user/:id is matched

                    {path: '', component: UserHome},

                    // UserProfile will be rendered inside User's <router-view>

                    // when /user/:id/profile is matched

                    {path: 'profile', component: UserProfile},

                    // UserPosts will be rendered inside User's <router-view>

                    // when /user/:id/posts is matched

                    {path: 'posts', component: UserPosts}

                ]

            }

        ]

    });

    const app = new Vue({router}).$mount('#app')

</script>

</body>

</html>


子组件

子路由

动态路由

命名视图

路由综合例子

参考:

https://jsfiddle.net/posva/22wgksa3/

点settings显示2个导航, 点profile导航, 显示2个组件.

ps: 这点对理解vue-router非常重要.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <router-view></router-view>

</div>

<template id="mysettings">

    <div>

        <p>mysettings</p>

        <router-link to="/mysettings/email">/mysettings/email</router-link>

        <router-link to="/mysettings/profile">/mysettings/profile</router-link>

        <router-view></router-view>

        <router-view name="profilepreview"></router-view>

    </div>

</template>

<template id="email">

    <div>

        <p>email</p>

    </div>

</template>

<template id="profileedit">

    <div>

        <p>profileedit</p>

    </div>

</template>

<template id="profilepreview">

    <div>

        <p>profilepreview</p>

    </div>

</template>

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

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

<script>

    let mysettings = {

        template: "#mysettings"

    };

    let email = {

        template: "#email"

    };

    let profileedit = {

        template: "#profileedit"

    };

    let profilepreview = {

        template: "#profilepreview"

    };

    let routes = [

        {

            path: '/mysettings', component: mysettings, children: [

                {path: 'email', component: email},

                {

                    path: 'profile', components: {

                        default: profileedit,

                        profilepreview: profilepreview

                    }

                },

            ]

        }

    ];

    let router = new VueRouter({routes});

    let vm = new Vue({

        el: "#app",

        router,

    })

</script>

</body>

</html>

[vue]vue路由篇vue-router的更多相关文章

  1. 前端vue系列-起始篇 vue的基本认知

    hi,大家伙,我是佛系大大,很高兴与你们一起沟通,学习,进步. 很久不更新博客了,现在回来再写博客,尽然是有些怀念的感觉,幸福的感觉.因为写博客,内心会很宁静,沉浸在自己的世界中,是很幸福的一件事.当 ...

  2. vue 快速入门 系列 —— vue loader 扩展

    其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...

  3. vue学习指南：第十一篇(详细) - Vue的 路由 第一篇 ( router )

    一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...

  4. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  5. Vue的路由Router之导航钩子和元数据及匹配

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  h ...

  6. Vue回炉重造之router路由（更新中）

    安装vue-router npm i vue-router -S 配置1.创建文件夹与文件 创建一个router文件夹,在文件夹中创建两个文件,分别是router.js和routes.js文件.2.编 ...

  7. 分享一篇vue项目规范

    最近 Vue 用的比较多,而且因为公司里有实习生,当几个人写一个项目的时候,会出现很多问题,最麻烦的就是规范不统一,之前我有一篇文章是说, vue 是比较有规范的一种框架了,但是也会出现很多问题,所以 ...

  8. Vue番外篇 -- vue-router浅析原理

    近期被问到一个问题,在你们项目中使用的是Vue的SPA(单页面)还是Vue的多页面设计? 这篇文章主要围绕Vue的SPA单页面设计展开. 关于如何展开Vue多页面设计请点击查看. 官网vue-rout ...

  9. vue权限路由实现方式总结二

    之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...

  10. Vue结合路由配置递归实现菜单栏

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

随机推荐

  1. Spring.NET依赖注入框架学习--入门

    Spring.NET依赖注入框架学习--入门 在学些Spring.net框架之前,有必要先脑补一点知识,比如什么是依赖注入?IOC又是什么?控制反转又是什么意思?它们与Spring.net又有什么关系 ...

  2. 编译你的第一个Java虚拟机--Centos 7 编译openJdk1.7源码

    一.前言 最近在看<深入java虚拟机>,看完后,打算自己实际编译一个jvm出来看看,实践一下. 书上提到了Oracle JDK和OpenJdk的关系,Oracle Jdk7 和OpenJ ...

  3. 跟bWAPP学WEB安全(PHP代码)--终结篇：文件目录遍历、文件上传、SSRF、CSRF、XXE、文件包含

    前言 过年过的很不顺,家里领导和我本人接连生病,年前腊月29才都治好出院,大年初六家里的拉布拉多爱犬又因为细小医治无效离开了,没能过年回家,花了好多钱,狗狗还离世了.所以也就没什么心思更新博客.今天初 ...

  4. Java NIO学习笔记---Channel

    Java NIO 的核心组成部分: 1.Channels 2.Buffers 3.Selectors 我们首先来学习Channels(java.nio.channels): 通道 1)通道基础 通道( ...

  5. day_6.7 py tcp

    2018-6-7 09:20:34 #!/usr/bin/env python #!--*--coding:utf-8 --*-- #!@Time :2018/6/7 9:54 #!@Author T ...

  6. 洛谷P1135 奇怪的电梯【bfs】

    题目:https://www.luogu.org/problemnew/show/P1135 题意: 一共有n层楼,在第i层可以往上或往下$k_i$层. 问从$a$层到$b$层至少需要多少乘多少次电梯 ...

  7. Codeforces 670E - Correct Bracket Sequence Editor - [对顶栈]

    题目链接:https://codeforces.com/contest/670/problem/E 题意: 给出一个已经匹配的括号串,给出起始的光标位置(光标总是指向某个括号). 有如下操作: 1.往 ...

  8. [No000011F]Python教程2/9-安装Python 及其解释器介绍

    因为Python是跨平台的,它可以运行在Windows.Mac和各种Linux/Unix系统上.在Windows上写Python程序,放到Linux上也是能够运行的. 要开始学习Python编程,首先 ...

  9. [No0000100]正则表达式匹配解析过程分析(正则表达式匹配原理)＆regexbuddy使用＆正则优化

    常见正则表达式引擎引擎决定了正则表达式匹配方法及内部搜索过程,了解它至关重要的.目前主要流行引擎有:DFA,NFA两种引擎. 引擎 区别点 DFA Deterministic finite autom ...

  10. 微信、QQ群短文本聊天语料总结

    在文本分类任务中,语料的特性千差万别,我们需要找到适合模型并抓住数据的特性,最终才能得到较好的model.最近在文本类别标注任务,就是给文本打标签确定该文本的类别.这是一个很费人工的过程,需要认真仔细 ...