前言

　　地址栏路由的发展经历了后端路由配置阶段、前后端分离阶段、直至单页面富应用阶段。本文来总结一下 vue-router 的相关知识点和用法。

正文

　　1、什么是 vue-router 路由

　　路由就是SPA（单页应用）的路径管理器,vue-router就是WebApp的链接路径管理系统。

　　vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。总之，在vue中页面路径的改变就是组件的切换。

　　2、通过router-link访问路由实例

　　router-link 声明式访问路由实例，相当于a标签来改变地址来路径，并渲染对应的组件。

　　（1）普通路由的使用，分如下三步：

　　　　a、注册路由组件并定义路由表

　　　　b、创建路由实例并挂载到根实例

　　　　c、通过 router-link 组件来导航路由,通过router-view来渲染对应的组件，同时导航栏地址跳转。

　　具体代码如下：

 　　　　<body>

            <div id="app">

                <p>

                    <!-- 使用 router-link 组件来导航. -->

                    <!-- 通过传入 `to` 属性指定链接. -->

                    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

                    <router-link to="/foo">Go to Foo</router-link>

                    <router-link :to="{name:'bar',params: { bar: 123 }}">Go to Bar</router-link>

                    <router-link :to="{name:'car',query: { car: 234 }}">Go to Car</router-link>

                </p>

                <!-- 路由出口:路由匹配到的组件将渲染在这里 -->

                <router-view></router-view>

            </div>

　　　　 </body>

　　　　<script>

        // 定义 (路由) 组件。

        // 可以从其他文件 import 进来

        const Foo = { template: '<div>foo</div>' }

        const Bar = { template: '<div>bar</div>' }

        const Car = { template: '<div>Car</div>' }

        //定义路由表

        // 每个路由应该映射一个组件。 其中"component" 可以是

        // 通过 Vue.extend() 创建的组件构造器，

        // 或者，只是一个组件配置对象。

        // 我们晚点再讨论嵌套路由。

        const routes = [

            { path: '/foo', name: 'foo',component: Foo },

            { path: '/bar', name: 'bar',component: Bar },

            { path: '/car', name: 'car',component: Car }

        ]

        // 创建 router 实例，然后传 `routes` 配置

        // 你还可以传别的配置参数, 不过先这么简单着吧。

        const router = new VueRouter({

            routes // (缩写) 相当于 routes: routes

        })

        // 创建和挂载根实例。

        // 记得要通过 router 配置参数注入路由，

        // 从而让整个应用都有路由功能

        const app = new Vue({

            router

        }).$mount('#app')

        </script>
页面效果如下：

　　上面的代码中，通过router-link访问路由实例，第一个标签中to属性值匹配路由表中path属性，后面两个通过name值去匹配路由表中的name属性，并且分别传递了参数，注意观察对应的地址栏变化。

　　（2）嵌套路由

    <body>

        <div id="app">

        <p>

            <router-link to="/foo">Go to Foo</router-link>

            <router-link to="/bar">Go to Bar</router-link>

        </p>

        <router-view></router-view>

        </div>

    </body>

     <script>

        const Foo = { template: '<div>foo</div>' }

        const Bar = {

            template: `<div>

                            <router-link to="/bar/car">to Car</router-link>

                            <router-link :to="{name:'dar',query:{dar:123}}">to Dar</router-link>

                            <router-view></router-view>

                        </div>` }

        const Car = { template: '<div>Car</div>' }

        const Dar = { template: '<div>Dar</div>' }

        const routes = [

            { path: '/foo', component: Foo },

            {

                path: '/bar', component: Bar,

                children: [

                    { path: 'car',name:"car", component: Car },// 这里需要注意子路由path的用法，若前面加了"/" 表示该路由为根路径，router-link中to 需要对应根路径，不推荐在子路由前加"/"

                    { path: 'dar', name:"dar",component: Dar }

                ]

            }

        ]

        const router = new VueRouter({

            routes

        })

        const app = new Vue({

            router

        }).$mount('#app')

    </script>

　　运行效果如下：

　　上面的代码中在根路由中嵌套了子路由，同样通过router-link的方式来访问，也支持name属性匹配路由表和传递值等操作，需要注意子路由推荐使用path属性值不带"/"

　　3、通过  $router 的实例方法访问路由实例

　　通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由,在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router对象完成。该方法等同于前面的声明式访问路由实例。

　　this.$router.push()该方法的参数可以是一个字符串路径，或者一个描述地址的对象，该方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

    <body>

        <div id="app">

            <p>

                <button @click="handleFoo">to Foo </button>

                <button @click="handleBar">to Bar</button>

            </p>

            <router-view></router-view>

        </div>

    </body>

    <script>

        const Foo = { template: '<div>foo{{this.$route.params.foo}}</div>' }

        const Bar = { template: '<div>bar{{this.$route.query.bar}}</div>' }

        const routes = [

            { path: '/foo', name: 'foo',component: Foo },

            { path: '/bar', name: 'bar',component: Bar },

        ]

        const router = new VueRouter({

            routes

        })

        const app = new Vue({

            router,

            methods:{

                handleFoo(){

                    this.$router.push({name:"foo",params:{foo:123}})

                },

                handleBar(){

                    this.$router.push({path:"/bar",query:{bar:234}})

                }

            }

        }).$mount('#app')

    </script>
　　运行结果如下：

　　但是在重复点击按钮，路由重复时，控制台出现报错，如下：

　　上面的报错是因为push方法导致路由重复在当前路由，这里需要在原型上修改push方法，代码如下：

    //获取原型对象上的push函数

    const originalPush = VueRouter.prototype.push;

    //修改原型对象中的push方法

    VueRouter.prototype.push = function push(location) {

      return originalPush.call(this, location).catch((err) => err);

    };

　　除了this.$router.push()之外还有别的访问路由实例方法，如：this.$router.replace()不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

this.$router.go(n) 在history 记录中向前或者后退多少步，类似 window.history.go(n)。

　　4、this.$router 和 this.$route 的区别及使用

　　this.$router：是全局路由器 router 的实例，可以在任何组件内进行访问，路由实例里面有很多属性和方法，比如push方法。

　　this.$route：是当前激活的页面的路由信息对象，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)，也有一些属性，这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。

总之，可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由。

　　5、动态路由

　　某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径： /user/aaaa或/user/bbbb。除了有前面的/user之外，后面还跟上了用户的ID 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。代码如下：

    <div id="app">

        <p>

            <router-link to="/foo">Go to Foo</router-link>

            <router-link to="/bar/123">Go to Bar</router-link>

        </p>

        <router-view></router-view>

    </div>

    <script>

        const routes = [

          { path: "/foo", component: Foo },

          { path: "/bar/:id", component: Bar },

        ];

        const router = new VueRouter({

          routes,

        });

        const app = new Vue({

          router,

        }).$mount("#app");

    </script>

　　运行结果如下：

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。

vue--vue-router 组件映射到路由的更多相关文章

  1. Vue之创建组件之配置路由!

    Vue之创建组件之配置路由!== 第一步: 当然就是在我们的试图文件夹[views]新建一个文件夹比如home 在home文件夹下面新建一个文件index.vue 第二步:在router目录下做如下事 ...

  2. vue轮播组件及去掉路由#

    最近公司要我去实现vue知识的系统讲解,总结一番,大致需要7节课,今天大致说一下我们使用vue需要学会的基本技能.vue是一个渐进性视图渲染框架,使用vue核心是数据出发,数据一般是我们前台从后台获取 ...

  3. vue初尝试--组件

    github代码同步网址 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添 ...

  4. vue组件，axios ,路由

    组件(Component)自定义封装的功能. 把一个功能相关的[HTML.css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”. 组件就是一个html网页中的功 ...

  5. Vue.js 2.x笔记：路由Vue Router（6）

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  6. Vue组件化和路由

    组件化 组件化是vue的核心思想,它能提高开发效率,方便重复使用,简化调试步骤,提升整个项目的可维护性,便于多人协同开发 组件通信 父组件 => 子组件: 属性props 特性$attrs 引用 ...

  7. Vue中router路由的使用、router-link的使用（在项目中的实际运用方式）

    文章目录 1.先看router中的index.js文件 2.router-link的使用 3.实现的效果 前提:router已经安装 1.先看router中的index.js文件 import Vue ...

  8. vue vuex vue-rouert后台项目——权限路由（超详细简单版）

    项目地址:vue-simple-template共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blu ...

  9. vue 开发系列（七） 路由配置

    概要 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将 ...

随机推荐

  1. Spark基础知识详解

    Apache Spark是一种快速通用的集群计算系统. 它提供Java,Scala,Python和R中的高级API,以及支持通用执行图的优化引擎. 它还支持一组丰富的高级工具,包括用于SQL和结构化数 ...

  2. 【get√】golang新手理解了一点点context

    测试代码如下: package practice import ( "context" "log" //"fmt" "time&q ...

  3. Android开发 定时任务清理数据

    原文地址:Android开发 定时任务清理数据 | Stars-One的杂货小窝 公司项目,需要整定时任务,对数据进行清理,需要在每天凌晨0:00进行数据的清理,使用了Alarm和广播的方式来实现 P ...

  4. python文档2-unittest单元测试之mock.patch

    介绍mock里面另一种实现方式,patch装饰器的使用,patch() 作为函数装饰器,为您创建模拟并将其传递到装饰函数 patch简介 1.unittest.mock.patch(target,ne ...

  5. python21day

    内容回顾 re模块的常用方法 findall(正则,待匹配字符串,flag):返回所有匹配项的列表 search:返回一个变量,通过group取到第一个匹配项 match:从头开始找第一个,其他同se ...

  6. Java线上问题排查神器Arthas实战分析

    概述 背景 是不是在实际开发工作当中经常碰到自己写的代码在开发.测试环境行云流水稳得一笔,可一到线上就经常不是缺这个就是少那个反正就是一顿报错抽风似的,线上调试代码又很麻烦,让人头疼得抓狂:而且deb ...

  7. c语言字符串函数详解

    转载请注明来源:https://www.cnblogs.com/hookjc/ oid *memset(void *dest, int c, size_t count); 将dest前面count个字 ...

  8. ubuntu memcached安装与配置

    转载请注明来源:https://www.cnblogs.com/hookjc/ 关于Memcache与memcachedMemcache是项目名,memcached是服务名.让很多初接触的人感觉很是莫 ...

  9. Linux curl命令进行网络请求

    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11841353.html 1. curl get请求: curl http://www.baid ...

  10. iOS应用启动main函数

    #import <UIKit/UIKit.h> #import "AppDelegate.h" int main(int argc, char * argv[]) { ...