有时候，我们在用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. 两数之和 Two Sum

    给定一个整数数列,找出其中和为特定值的那两个数. 你可以假设每个输入都只会有一种答案,同样的元素不能被重用. 示例: 给定 nums = [2, 7, 11, 15], target = 9 因为 n ...

  2. Jsp Session

    1. Session的定义 Session用于跟踪客户的状态. Session指的是在一段时间内,单个客户与Web服务器的一连串相关的交互过程.在一个Session中 ,客户可能多次请求访问同一个网页 ...

  3. 使用scrapy框架爬取自己的博文

    scrapy框架是个比较简单易用基于python的爬虫框架,http://scrapy-chs.readthedocs.org/zh_CN/latest/ 这个是不错的中文文档 几个比较重要的部分: ...

  4. ES(2): Build ES Cluster on Azure VM

    目录: 系统环境准备 安装ES集群 安装Kibana 安装x-pack 安装head 系统环境准备 参见: HDP2.4安装(二):Centos7配置 修改network: 修改hosts: 配置ss ...

  5. 【selenium】XPATH语法（一）

    XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) 来选取的. 我们将在下面的例子中使用这个 XML 文档. <?xml v ...

  6. Android Drawable Mipmap Vector使用及Vector兼容

    原文地址:http://blog.csdn.net/eclipsexys/article/details/51838119 http://blog.csdn.net/qq_15545283/artic ...

  7. Qt Creator 预览QtCreator中的界面

    当在QtCreator界面编辑器中放置好布局和控件之后,组合键 Alt + Shift + R 可以实现预览功能.                       也可以通过以下方式更改快捷键: 具体路径 ...

  8. springMVC学习(6)-包装pojo类型、数组、list、Map类型参数绑定

    一.包装类型pojo参数绑定: 需求:商品查询controller方法中实现商品查询条件传入. 实现方法: 1)在形参中 添加HttpServletRequest request参数,通过reques ...

  9. HTML5: input:file上传类型控制

    ylbtech-HTML5: input:file上传类型控制   1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的 ...

  10. [UE4]多播代理

    1. 第一种 DECLARE_DYNAMIC_MULTICAST_DELEGATE_TwoParams(FReceiveDelegateEvent, FString, Value1, FString, ...