一起学Vue:路由(vue-router)
前言
学习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':
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>
<router-link to="/ui">有UI</router-link>
<router-link to="/api">有API</router-link>
</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)的更多相关文章
- vue路由请求 router
创建一个Router.js文件 // 路由请求//声明一个常量设置路菜单// import Vue from "vue/types/index";import Vue from ' ...
- 六、vue路由Vue Router
一.基本概念 route, routes, router 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, a ...
- vue路由--使用router.push进行路由跳转
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 route-link是在html中静态定 ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
- react router @4 和 vue路由 详解(一)vue路由基础和使用
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
- 单页vue路由router
Vue.js + vue-router 可以很简单的实现单页应用. <router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容. to 属性为目标地址, ...
- 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)
大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...
- vue路由登录拦截(vue router登录权限控制)
实现原理: 哪些路由需要验证需要在路由文件router/index.js中指定: { path: '/', component: Home, name: 'Home', iconCls: 'fa fa ...
随机推荐
- Vue 属性渲染
属性渲染 关于标签的属性渲染统一使用v-bind属性指令,比如轮播图的src全部经过后端获得,所以我们需要对src属性做动态渲染. 基本使用 使用v-bind属性指令,动态绑定图片的地址. <b ...
- 服务器备用远程-----Radmin客户端的操作指南(如何远程与传送文件)
一台服务器的寿命一般比较长可能会从几年到几十年,就会经历各个版本的更新与升级.再经过时间的历练后,可能windwos自带的远程连接有时候会拉胯,经常报错. 这时候就需要备选方案,有钱的单位会自己搭建堡 ...
- Matlab绘制子图subplot使用攻略
参考:https://jingyan.baidu.com/article/915fc414ad794b51394b20e1.html Matlab绘制子图subplot使用攻略 听语音 原创 | 浏览 ...
- 利用 yum 命令和 rpm 命令升级 Nginx 或者安装最新版本 Nginx
方法一:使用 yum 命令升级 Nginx 1.在配置 YUM 仓库的目录(/etc/yum.repos.d/)下新增文件 nginx.repo vi /etc/yum.repos.d/nginx. ...
- docker容器命令2
docker容器命令2 启动守护式容器 docker run -d 镜像名字 [root@tzh ~]# docker images REPOSITORY TAG IMAGE ID CREATED S ...
- TTL电平,CMOS电平,232/485电平,OC门,OD门基础知识
1.RS232电平 或者说串口电平,有的甚至说计算机电平,所有的这些说法,指得都是计算机9针串口 (RS232)的电平,采用负逻辑, -15v ~ -3v 代表1 +3v ~ +15v 代表0 2. ...
- protoc-c 阅读笔记
以前和山哥做过类似的,最近想起来,抽空又看了下 protoc-c. 山哥做的报文流向: rpc -> lydtree -> motree -> struct 涉及的细节很多 1) l ...
- MeteoInfoLab脚本示例:获取气团轨迹每个节点的气象数据
读取HYSPLIT输出的轨迹数据文件和相应时间的气象数据文件,生成轨迹图层,循环每条轨迹的节点,读出该节点的经度.纬度.气压.时间,通过对气象数据插值获得该节点的气象数据.脚本程序: #------- ...
- 发布TrajStat 1.4.4
发布TrajStat 1.4.4 (MeteoInfo Java版插件),在PSCF和CWT源区分析中增加了依据格点中的气团轨迹条数为权重进行结果处理的功能.之前的仅有按照轨迹节点数目进行权重处理的功 ...
- C++11随机数库
random随机数库 C++11引入了新的随机数生成机制,那就是<random>随机数库,支持多种伪随机数生成算法,多种连续和离散随机数分布算法,以及封装了真正的随机数生成引擎random ...