路由的基本概念与原理

Vue Router

Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器。

它和vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发。

Vue Router包含的功能有:

  • 支持HTML5 历史模式或hash模式
  • 支持嵌套路由
  • 支持路由参数
  • 支持编程式路由
  • 支持命名路由

vue-router的基本使用

基本使用步骤

1.引入相关的库文件

  • 导入vue文件为全局window对象挂载Vue构造函数
  • 导入vue-router文件,为全局window对象挂载VueRouter构造函数

注意:vue文件一定要在vue-router文件之前导入

2.添加路由链接

  • router-link 是vue中提供的标签,默认会被渲染为a标签
  • to属性默认会被渲染为href 属性
  • to属性的值默认会被渲染为#开头的hash地址
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

3.添加路由填充位

  • 路由填充位(也叫做路由占位符)
  • 将来通过路由规则匹配到的组件,将会被渲染到router-view 所在的位置
<router-view></router-view>

4.定义路由组件

var User = {
template:'<div>User</div>'
}
var Register = {
template:'<div>Register</div>'
}

5.配置路由规则并创建路由实例

//创建路由实例对象
var router = new VueRouter({
// routes 是路由规则数组
routes: [
//每个路由规则都是一个配置对象, 其中至少包含path和component 两个属性:
// path表示当前路由规则匹配的hash 地址
// component 表示当前路由规则对应要展示的组件
{path: /user ', component: User},
{path:'/ register', component: Register}
]
})

注意:component只接收路由对象,不接受字符串

6.把路由挂载到Vue根实例中

new Vue({
el:'#app',
//为了能够让路由规则生效,必须把路由对象挂载到vue实例对象上
//router:router,在ES6中,如果属性名和属性值的名字是也一致的,可以简写
router
});

04 Vue Router路由管理器的更多相关文章

  1. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

  2. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  3. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  4. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  5. Vue Router 路由守卫:完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  6. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  7. 04、Unity_声音管理器

    1.分享一个Unity中用于管理声音的声音管理器,适合于中小型项目,大项目就算了. 2.借鉴了很多的源码,最后修改完成,吸取百家之长,改为自己所用,哈哈. 3.源码奉上: /* * * 开发时间:20 ...

  8. Ubuntu 18.04图形化软件包管理器

    1.ubuntu软件这个管理工具提供了一种管理您系统中软件的好方法,通过他可以很直观的查找软件安装很简单,打开终端,输入以下命令:----------------------------------- ...

  9. Vue Router 路由实现原理

    一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash  ...

随机推荐

  1. Postman中get

    :Postman中get接口实战讲解(接口测试介绍,接口测试流程,头域操作) Postman的使用 postman工具是软件开发和测试人员常用的一种工具,常用来做接口测试,它虽然也有抓取接口等功能,但 ...

  2. 前端与编译原理 用js去运行js代码 js2run

    # 前端与编译原理 用js去运行js代码 js2run 前端与编译原理似乎相隔甚远,各种热门的框架都学不过来,那能顾及到这么多底层呢,前端开发者们似乎对编译原理的影响仅仅是"抽象语法树&qu ...

  3. windows和linux环境下java调用C++代码-JNI技术

    最近部门做安卓移动开发的需要调C++的代码,困难重重,最后任务交给了我,查找相关资料,没有一个教程能把不同环境(windows,linux)下怎么调用说明白的,自己在实现的过程中踩了几个坑,在这里总结 ...

  4. 洛谷--P1028 数的计算(递推)

    题意:链接:https://www.luogu.org/problem/P1028 先输入一个自然数n (n≤1000) , 然后对此自然数按照如下方法进行处理: 不作任何处理; 在它的左边加上一个自 ...

  5. c,使用lib,dll

    lib使用: #include "xxx.h" // lib的头文件 #pragma comment(lib, "xxx.lib") 这样会将lib里的数据编译 ...

  6. Go语言【数据结构】数组

    数组 简介 数组是具有相同唯一类型的一组已编号且长度固定的数据项序列,这种类型可以是任意的原始类型例如整形.字符串或者自定义类型.数组形式 numbers[0], numbers[1] ..., nu ...

  7. 4. Spark Streaming解析

    4.1 初始化StreamingContext import org.apache.spark._ import org.apache.spark.streaming._ val conf = new ...

  8. 删除elasticsearch 30天前的所有索引

    我的索引格式为 xxx-xxx-xxx-2019.06.27 xxx-xxxx-2019.06.27 脚本思路: 获取目前 es上所有索引,以日期进行拆分,然后用索引时间对比一个月前的日期,日期小于一 ...

  9. C# 对象集合初始化

    一.自动实现的属性 public class Person { // C# 3之前我们定义属性时,一般会像下面这样去定义 // 首先会先定义私有字段,再定义属性来对字段进行访问 //private s ...

  10. ArcGIS Engine开发鹰眼图的功能(基础篇)

    鹰眼是用于调节全视域范围内主地图显示范围情况的副地图.它体现了地图整体与详细局部的关系. 用户可以通过鼠标单击或者画框等动作实现鹰眼与主地图的交互情况. 鹰眼功能的原理是通过主地图窗口的地图控件和鹰眼 ...