前言

学习vue-router就要先了解路由是什么?前端路由的实现原理?vue-router如何使用?等等这些问题,就是本篇要探讨的主要问题。

vue-router是什么

路由是什么?

大概有两种说法:从路由的用途上来解释路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同。从路由的实现原理上来解释路由就是URL到函数的映射。

vue-router是什么

Vue Router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成。

vue-router实现原理

基于hash

基于location.hash来实现的。其实现原理也很简单,location.hash的值就是URL中#后面的内容。比如下面这个网站,它的location.hash='#me':

https://localhost#me

hash也存在下面几个特性:

  • URL中hash值只是客户端的一种状态,也就是说当向服务器端发出请求时,hash部分不会被发送。
  • hash值的改变,都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。
  • 我们可以使用hashchange事件来监听hash的变化。

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

基于History

如果不想要很丑的 hash,我们可以用路由的 history 模式,只需要在配置路由规则时,加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。其中做最主要的API有以下两个:history.pushState()和history.repalceState()。

const router = new VueRouter({
mode: 'history',
routes: [...]
})

如何使用vue-router

效果

使用

首先,安装vue-router

npm install vue-router

接下来,在main.js定义 (路由) 组件、安装插件、定义路由、创建 router 实例,然后传 routes 配置、创建和挂载根实例。

import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue'
import './plugins/element.js' // 1. 定义 (路由) 组件。
import TodoList from './components/TodoList.vue';
import TodoListWithUI from './components/TodoListWithUI.vue'
import TodoListWithApi from './components/TodoListWithApi.vue' Vue.config.productionTip = false // 2. 安装插件
Vue.use(VueRouter); // 3. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,或者,只是一个组件配置对象。
const routes = [
{ path: '/noui', component: TodoList },
{ path: '/ui', component: TodoListWithUI },
{ path: '/api', component: TodoListWithApi }
] // 4. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
}) // 5. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
new Vue({
router,
render: h => h(App),
}).$mount('#app')

最后,App.vue使用 router-link 组件来导航,和放置路由出口 router-view

<template>
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/noui">无UI</router-link>&nbsp;&nbsp;
<router-link to="/ui">有UI</router-link>&nbsp;&nbsp;
<router-link to="/api">有API</router-link>&nbsp;&nbsp;
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template> <script>
export default {
name: 'app',
components: {}
}
</script>

小结

目前为止,我们完成了vue-router的基本用法,是不是还是挺简单的呀。其他动态路由匹配、嵌套路由等用法我们在这里不进行展开了。

文中用到的代码我们放在:https://github.com/zcqiand/miscellaneous/tree/master/vue

一起学Vue:路由(vue-router)的更多相关文章

  1. vue路由请求 router

    创建一个Router.js文件 // 路由请求//声明一个常量设置路菜单// import Vue from "vue/types/index";import Vue from ' ...

  2. 六、vue路由Vue Router

    一.基本概念 route, routes, router 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮  => home内容, 这是一条route,  a ...

  3. vue路由--使用router.push进行路由跳转

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 route-link是在html中静态定 ...

  4. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  5. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  6. react router @4 和 vue路由 详解(一)vue路由基础和使用

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...

  7. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  8. 单页vue路由router

    Vue.js + vue-router 可以很简单的实现单页应用. <router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容. to 属性为目标地址, ...

  9. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  10. vue路由登录拦截(vue router登录权限控制)

    实现原理: 哪些路由需要验证需要在路由文件router/index.js中指定: { path: '/', component: Home, name: 'Home', iconCls: 'fa fa ...

随机推荐

  1. Oracle 中 Start With 关键字

    Start With (树查询) 基本语法如下: SELECT ... FROM + 表名 WHERE + 条件3 START WITH + 条件1 CONNECT BY PRIOR + 条件2 -- ...

  2. Spring学习(二)--Spring的IOC

    1.依赖反转模式 依赖反转:高层次的模块不应该依赖于低层次的模块,两者都应该依赖于抽象接口.抽象接口不应该依赖于具体实现.而具体实现则应该依赖于抽象接口. 在面向对象编程领域中,依赖反转原则(Depe ...

  3. 创建Maven项目中的几个问题

    一.用eclipse创建maven的web项目,需手动添加WEB-INF文件夹及其web.xml配置文件 二.设置编译版本1.8 在pom.xml中设置 1 <build> 2 <! ...

  4. python3 进行接口测试

    最近有研究接口测试,然后查了查资料,发现有两种方法,一种是使用urllib库,一种是使用requests库.而在这里,我使用的是requests库,为什么要用这个呢? 从官方文档看出,python的标 ...

  5. Linux驱动知识点

    # i2c_add_driver和i2c_new_device匹配后调用i2c_probe # 启动开发板,在超级终端中输入命令"cat /proc/misc"也可以查看对应的杂项 ...

  6. shiro认证流程源码分析--练气初期

    写在前面 在上一篇文章当中,我们通过一个简单的例子,简单地认识了一下shiro.在这篇文章当中,我们将通过阅读源码的方式了解shiro的认证流程. 建议大家边读文章边动手调试代码,这样效果会更好. 认 ...

  7. matlab中bitshift 将位移动指定位数

    来源:https://ww2.mathworks.cn/help/matlab/ref/bitshift.html?searchHighlight=bitshift&s_tid=doc_src ...

  8. 使用react Context+useReducer替代redux

    首先明确一点,Redux 是一个有用的架构,但不是非用不可.事实上,大多数情况,你可以不用它,只用 React 就够了. 曾经有人说过这样一句话. "如果你不知道是否需要 Redux,那就是 ...

  9. python简单实现论文查重(软工第一次项目作业)

    前言 软件工程 https://edu.cnblogs.com/campus/gdgy/informationsecurity1812 作业要求 https://edu.cnblogs.com/cam ...

  10. Mybatis老手复习文档

    Mybatis学习笔记 再次学习Mybatis,日后,有时间会把这个文档更新,改的越来越好,然后,改成新手老手通用的文档 1.我的认识 Mybatis 是一个持久层框架,(之前 我虽然学了这个myba ...