有时候，我们在用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. android调节音量——AudioManager的应用

    Android中可以通过程序获取系统手机的铃声和音量.同样,也可以设置铃声和音量.android中给出了AudioManager类来实现音量获取.音量控制. 本篇基于 Android API 中的 A ...

  2. PHP接口开发加密技术实例原理与例子

    下面例子简单讲解PHP接口开发加密技术:如app要请求用户列表,api是“index.php?module=user&action=list”app生成token = md5sum (‘use ...

  3. win xp firefox,chrome 在浏览网页时字体发虚，可以设置为新宋体

    firefox,chrome 在浏览网页时字体发虚,比如:驱动之家.可以设置为新宋体.

  4. 轻松理解execl系列函数

    execl函数功能如下:启动一个可执行文件,并且对他进行传送参数.一些原型如下 #include <unistd.h> extern char **environ; int execl(c ...

  5. Android自动化测试中AccessibilityService获取控件信息（1）

    Android自动化测试中AccessibilityService获取控件信息(1) 分类: android自动化测试2014-03-24 15:31 3455人阅读 评论(16) 收藏 举报 and ...

  6. electron热更新与windows下的安装包

    帮朋友公司做了点东西,他说有很多bug,我一看,基本问题都是浏览器兼容引起的,而electron内带Chromium内核,正好一直想尝试下electron,所以研究了一波.这里只是简单的使用elect ...

  7. Android logcat命令详解

    一.logcat命令介绍 1.android log系统 2.logcat介绍 logcat是android中的一个命令行工具,可以用于得到程序的log信息 log类是一个日志类,可以在代码中使用lo ...

  8. CentOs7安装gitlab（转！）

    沧浪之水清兮,可以濯吾缨; 沧浪之水浊兮,可以濯吾足.                                                                         ...

  9. linux中的ftp命令

    转载至:https://www.cnblogs.com/mingforyou/p/4103022.html 一.ftp的get命令和mget命令有何不同? get一次只下载一个文件:mget一次可以下 ...

  10. [UE4]Visual Studio的相关插件安装：UE4.natvis和UnrealVS Extension

    转自:http://aigo.iteye.com/blog/2281182 UE4.natvis 官方文档: https://docs.unrealengine.com/latest/INT/Prog ...