有时候，我们在用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. 解决mysql 8 安装后命令行可以连接，navicat不能连接的问题

    错误代码: client does not support authentication 解决办法: 1 使用命令行进入数据库 2 选着数据库  mysql   --> user mysql 3 ...

  2. php实现cookie加密解密

    1.加密解密类 class Mcrypt { /** * 解密 * * @param string $encryptedText 已加密字符串 * @param string $key 密钥 * @r ...

  3. net core 2.0学习笔记（一）：开发运行环境搭建 (转)

    期待已久的.net core 2.0终于发布了!大家等的花儿都谢了. 不过比预期提前了一个多月,这在微软历史上还真的不多见.按照历史经验看,2.0版本应该比较靠谱,我猜这也是社区非常火爆的原因吧.下面 ...

  4. golang 多个routine之间的同步

    本文以一个例子的方式介绍channel在同步中的使用. 下面的例子中,主task首先阻塞,直到两个task完成后,再继续执行. package main import ( "log" ...

  5. php设计模式之职责链模式

    <?php /** * @desc php设计模式之职责链模式(责任链模式) 定义:顾名思义,责任链模式为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这 ...

  6. 在 Windows 上使用 Cygwin

    引用:http://www.ibm.com/developerworks/cn/aix/library/au-spunix_cygwin/#resources Cygwin 是一个用于 Microso ...

  7. iis运行asp.net页面提示“服务器应用程序不可用”的解决办法_.NET.

    原因:主要是iis安装在了net framwork之后 解决办法:需要在IIS中重新注册.net 也就是要用到系统盘: cd c:\windows\microsoft.net\framework\v2 ...

  8. 关于office2016桌面新建不显示execl问题

    在百度,google找了很多方法都没有文档可以解决此问题,office2016安装完在新建是由ececl的,应该是我用了清理注册表工具,对execl项进行清理,造成没有execl,所以贴出原版xls, ...

  9. tomcat 性能优化（内存优化 线程优化）

    转自:http://blog.sina.com.cn/s/blog_4b5bc01101014s81.html tomcat 性能优化 linux修改TOMCAT_HOME/bin/catalina. ...

  10. linux date -d参数用法

    最近偶为了写一个调整时间的shell而绞尽脑汁,结果在某一天#info data这里面看到了data -d参数的灵活用法,真是欣喜若狂.好东西要保存,整理整理: * To print the date ...