有时候，我们在用vue的时候会有这样的需求，比如一个管理系统，点了左边的菜单栏，右边跳转到一个新的页面中，而且刷新的时候还会停留在原来打开的页面。

又或者，一个页面中几个不同的画面来回点击切换，这两种情况都可以用vue router路由来解决，本文假设读者已经了解vue.js的基本知识，例如模板等

我的做法是先跟着代码敲一遍看到效果，再讲解各个原因

1，引入js文件

<script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>

<script src="https://cdn.bootcss.com/vue-router/2.4.0/vue-router.js"></script>

2，代码

<body>

<div id="app">

    <div>

        <!--

            router-link to属性就是指向某个具体的链接，链接的内容会被渲染到router-view标签中

            router-link会被渲染成a标签，例如第一个会变成<a href="#/first">第一个页面</a>,前面加了个#

        -->

        <router-link  to="/first">第1个页面</router-link>

        <router-link  to="/second">第2个页面</router-link>

        <router-link  to="/third">第3个页面</router-link>

    </div>

    <router-view></router-view>

</div>

</body>

<script>

    /*

    * 申明三个模板

    */

    var first = { template: '<p>this is first page</p>' };

    var second = { template: '<p>this is second page</p>' };

    var third = { template: '<p>this is third page</p>' };

    /*

    * 定义路由，component属性是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。

    */

    var routes = [

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

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

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

    ];

    /*

    * 创建VueRouter实例

    */

    var router = new VueRouter({

        routes:routes

    });

    /*

    * 给vue对象绑定路由

    * .$mount("#app")手动挂载，用来延迟挂载，跟

    *  const app = new Vue({

    *   el:"#app"

    *   router

    * });

    * 效果是一样的

    */

    const app = new Vue({

        router

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

</script>

效果图

这个时候就基本实现了功能，点击几个按钮上面的地址会发生变化，并且router-view里面会被渲染成对应的内容。并且刷新页面不会跳到首页

运行步骤：

　　1，当router-link对应的标签被点击时，比如此时点击第二个，to的值是/second,那么实际的地址就是当前页面地址+#/second。

　　2，Vue会找到当前vue实例的路由里的routes里面path为/second的路由。

　　3，会将找到的这一行记录的模板component渲染到router-view里面。

redirct重定向

在routes数组里面添加

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

当打开页面时候，会自动重定向到第一个中.

tag

router-link默认会被渲染成a标签

我们可以加上tag="li"就会被渲染成li标签

active-class

router-link标签被选中时候会默认给选中的元素添加.router-link-active属性，我们可以通过设置active-class设置被选中后添加的class样式

Vue.js路由详解的更多相关文章

  1. Vue.js项目详解

    还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...

  2. vue.js使用详解

    1.什么是vue.jsvue.js是一款数据驱动型的js框架.何为数据驱动型?html视图层定义模板,vue定义数据.html和vue数据,通过标签id关联. 2.vue.js引入<script ...

  3. Vue.js 插件开发详解

    前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段 ...

  4. Vue.js用法详解（一）更新中~

      前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...

  5. node.js 路由详解

    路由的基本使用 第一步:获取url跟目录下的字符 var http = require('http'); var url = require('url') http.createServer(func ...

  6. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  7. main.js index.html与app.vue三者关系详解

    main.js index.html与app.vue三者关系详解 2019年01月23日 11:12:15 Pecodo 阅读数 186   main.js与index.html是nodejs的项目启 ...

  8. vue技术栈进阶（02.路由详解—基础）

    路由详解(一)--基础: 1)router-link和router-view组件 2)路由配置 3)JS操作路由

  9. vue 文件目录结构详解

    vue 文件目录结构详解 本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 项目简介 基于 vue.js 的前端开发环境,用于前后 ...

随机推荐

  1. Anglarjs 工具方法

    Angularjs 常用方法 1. isArray使用 效果图如下,结果为true 2.uppercase使用 $scope.name = "zhangsan"; $scope.n ...

  2. Hadoop高级培训课程大纲-开发者版

    一.课程概述 本次培训课程主要面向大数据系统管理人员和开发设计人员,基于开源社区大数据应用最活跃的Hadoop和HBase技术框架,围绕分布式文件存储(HDFS).分布式并行计算(Map/Recue) ...

  3. zabbix 3.4新功能值预处理

    Zabbix 3.4版本更新了许多新功能,其中一个监控项功能Preprocessing,根据官方说明文档,在监控项收集的数据存储到数据库前,预先对数据进行处理,使用效果超过预期.这个功能存放位置在创建 ...

  4. 小峰servlet/jsp（6）jstl核心标签库

    一.引入jstl 需要jstl.jar;standard.jar; 二.jstl核心标签库: c:out         内容输出标签; c:set      用来设置4种属性范围值的标签: c:re ...

  5. 本地ip 和 网络ip 解释

    本地IP其实就是私有IP地址10.0.0.0--10.255.255.255172.16.0.0----172.31.255.255192.168.0.0---192.168.255.255 这些都是 ...

  6. Java设计原则之里氏替换原则

    里氏代换原则由2008年图灵奖得主.美国第一位计算机科学女博士Barbara Liskov教授和卡内基·梅隆大学Jeannette Wing教授于1994年提出.其严格表述如下:如果对每一个类型为S的 ...

  7. 上Google Adsense个人的一点体验

    最近我想开通一个Google Adsense帐号,因为以前注册过一个Google帐号,所以我以为两个是可以共通的,因为很久没上Google帐号,我记不太清密码了,所以我先是登录了Google,登上去了 ...

  8. 1038 Recover the Smallest Number （30 分）

    1038 Recover the Smallest Number (30 分) Given a collection of number segments, you are supposed to r ...

  9. System.Security.Authentication.AuthenticationException：根据验证过程，远程证书无效。

    好久没写博客了,今天突然遇到个神奇的问题. 做好的网站在win10上和Windows sever 2012 上都没有问题,搬到Windows sever 2003上就出现了这么一个错误: Server ...

  10. IO基础知识

    传统的IO是阻塞的,BIO----基于流的模式,数据与Stream直接通信 NIO非阻塞的基于快的模式.数据与channel不直接交换数据,而是通过buffer进行数据交换. 基于文件的IO 基于网络 ...