有时候，我们在用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. 三个php加密解密算法

    三个功能强大的php加密解密函数 //加密函数 function lock_url($txt,$key='www.fyunw.com') { $chars = "ABCDEFGHIJKLMN ...

  2. JZ2440 裸机驱动 第13章 LCD控制器(2)

    13.2 TFT LCD显示实例 13.2.1 程序设计     本实例的目的是从串口输出一个菜单,从中选择各种方法进行测试,比如画线. 画圆.显示单色.使用调色板等. 13.2.2代码详解     ...

  3. VBox修改uuid

    1.使用VBoxManage命令时,需要先在命令行中切换到VirtualBox的安装目录下 2.修改vdi的uuid:VBoxManage internalcommands sethduuid  D: ...

  4. OOD与OOP的思想的感悟

    Walking on water and developing software from a specification are easy if both are frozen) -Edward V ...

  5. Mysql-binlog的移动和归档

    #!/bin/bash # To backup and archive binlogs. declare -i NUM=0 declare -i SUM=0 SUM=`/bin/ls -l mysql ...

  6. 挂载本地ISO

    http://www.linuxidc.com/Linux/2017-03/142087.htm 挂载本地ISO mount -o loop /home/iso/RHEL-server-7.0-x86 ...

  7. PHPExcel导入导出 若在thinkPHP3.2中使用（无论实例还是静态调用（如new classname或classname::function)都必须加反斜杠，因3.2就命名空间，如/classname

    php利用PHPExcel类导出导入Excel用法 来源:   时间:2013-09-05 19:26:56   阅读数: 分享到: 16 [导读] PHPExcel类是php一个excel表格处理插 ...

  8. golang web框架 beego 学习 （二） router and controller

    1 Router和Controller的常用配置 beego.Router("/user/admin", &controllers.UserController{}) // ...

  9. 伯克利推出「看视频学动作」的AI智能体

    伯克利曾经提出 DeepMimic框架,让智能体模仿参考动作片段来学习高难度技能.但这些参考片段都是经过动作捕捉合成的高度结构化数据,数据本身的获取需要很高的成本.而近日,他们又更进一步,提出了可以直 ...

  10. tensorboard启动图

    import tensorflow as tf # 定义一个简单的计算图,实现向量加法的操作. input1 = tf.constant([1.0, 2.0, 3.0], name = 'input1 ...