介绍

本文主要介绍路由的相关知识，当然主要是以Vue的路由为主要介绍对象。

有兴趣的朋友可以看看之前的文章：

Vue学习笔记（一）—— 常用特性
Vue学习笔记（二）—— 组件开发
Vue学习笔记（三）—— 前后端交互

1、路由基本概念与原理

1.1 路由

路由是一个比较广义和抽象的概念，路由的本质是对应关系。

在开发中，路由分为：

后端路由
前端路由

1、后端路由

概念：根据不同的用户 URL 请求，返回不同的内容
本质：URL 请求地址与服务器资源之间的对应关系

2、SPA(Single Page Applicaton)

后端渲染（存在性能问题）
Ajax前端渲染（前端渲染提供性能，但是不支持浏览器的前进后退操作）
SPA(Single Page Applicaton) 单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后台操作
SPA 实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问例时的变化、但是hash的变化不会触发新的URL请求)
在实现SPA过程中，最核心的技术点就是前端路由

3、前端路由

概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系

4、实现简易前端路由

基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

效果如下：

// 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function () {// 通过location.hash 获取到最新的 hash 值
}

以上是实现路由的简单代码提示，实际开发中，可以使用专门封装好的路由插件即可。

1.2 Vue Router

Vue Router (官网：https://router.vuejs.org/zh/)是 Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。

Vue Router 包含的功能有：

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

2、vue-router 的基本使用

2.1 基本使用步骤

引入相关的库文件
添加路由链接
添加路由填充位
定义路由组件
配置路由规则并创建路由实例
把路由挂载到Vue 根实例中

1、引入相关的库文件

<!-- 导入 vue 文件，为全局 window 对象挂载 Vue 构造函数 -->
<script src='./lib/vue.js'></script><!-- 导入 vue-router 文件，为全局 window 对象挂载 VueRouter 构造函数 -->
<script src='./lib/vue-router.js'></script>

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 = {tempalte:'<div>User</div>'
}var Register = {tempalte:'<div>Register</div>'
}

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

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

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

new Vue({el: '#app',// 为了能够让路由规则生效，必须把路由对象挂载到 vue 实例对象上router
})

2.2 路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

var router = new VueRouter({routes: [// 其中，path 表示需要被重定向的 原地址，redirect 表示将要被重定向到的 新地址{path: '/', redirect : '/user'},{path: '/user',component: User},{path: '/register',component: Register}]
})

3、vue-router 嵌套路由

3.1 嵌套路由用法

1、嵌套路由功能分析

点击父级路由链接显示模板内容
模板内容中又有子级路由链接
点击子级路由链接显示子级模板内容

2、父路由组件模板

父级路由链接
父组件路由填充位

<p><router-link to="/user">User</router-link><router-link to="/register">Register</router-link>
</p><div><!-- 控制组件的显示位置 --><router-view></router-view>
</div>

3、子级路由模板

子级路由链接
子级路由填充位

const Register ={tempalte: `<div><h1>Register 组件</h1><hr /><router-link to="/register/tab1">Tab1</router-link><router-link to="/register/tab2">Tab2</router-link><!-- 子路由填充位 --><router-view></router-view></div>`
}

4、嵌套路由配置

父级路由通过 children 属性配置子级路由

var router = new VueRouter({routes: [{path: '/user',component: User},{path: '/register',component: Register// 通过 children 属性，为 /register 添加子路由规则children : [{path :'/register/tab1',component: Tab1},{path :'/register/tab2',component: Tab2}]}]
})

4、vue-router 动态路由匹配

4.1 动态匹配路由基本用法

思考

<!-- 有如下3个路由链接 -->
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>

// 定义如下三个独立的路由规则，是否可行？？
{ path: '/user/1', component: User}
{ path: '/user/2', component: User}
{ path: '/user/3', component: User}

如果路由链接数量增加到1000个，那也需要定义1000个路由规则，这也肯定是不行的。

应用场景：通过动态路由参数的模式进行路由匹配

var router = new VueRouter({routes: [// 动态路由参数 以冒号开头{path: '/user/:id' ,component: User}]
})const User ={// 路由组件中通过 $route.parmas 获取路由参数template: '<div> User {{ $route.parmas.id }}</div>'
}

4.2 路由组件传递参数

$route 与对应路由形成高度耦合，不够灵活，所有可以使用 props 将组件和路由解耦。

1、props 的值为布尔类型

const router = new VueRouter({routes: [// 如果 props 被设置为 true ，route.params 将会被设置为组件属性{path : '/user/:id',component: User,props: true}]
})const User = {props: ['id'],  // 使用 props 接收路由参数tempalte: '<div>用户ID：{{ id }}</div>'  // 使用路由参数
}

2、props 的值为对象类型

const router = new VueRouter({routes: [// 如果 props 被设置为对象，它会被原样设置为组件属性 ,而 :id 相当于废了{path : '/user/:id',component: User,props: { uname: 'lisi' , age: 12 }}]
})const User = {props: ['uname', 'age'], tempalte: '<div>用户信息：{{ uname + '-----' + age }}</div>'
}

3、props 的值为函数类型

const router = new VueRouter({routes: [// 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参{path : '/user/:id',component: User,props: route => ({ uname: 'lisi' , age: 12 ,id:route.params.id })}]
})const User = {props: ['uname', 'age','id'],  tempalte: '<div>用户信息：{{ uname + '-----' + age + '-----' + id }}</div>'
}

5、vue-router 编程式导航

5.1 页面导航的两种方式

声明式导航：通过点击链接实现导航的方式，叫做声明式导航

例如：普通网页中的 <a></a> 链接或 vue 中的 <router-link></router-link>
编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航

例如：普通网页中的 location.href

5.2 编程式导航基本用法

常用的编程式导航API如下：

this.$router.push(‘hash地址’)
this.$router.go(n)

go 中的n表示数组，整数表示向前，负数表示后退

const User = {template: '<div><button @click="goRegister">跳转到注册页面</button></div>',methods: {goRegister :function () {// 用编程的方式控制路由跳转this.$router.push('/register')}}
}

5.3 编程式导航参数规则

router.push() 方法的参数规则

// 字符串（路径名称）
router.push('/home')
// 对象
router.push({path: '/home'})
// 命名的路由（传递参数）
router.push({name:'/user',params:{userId:123}})
// 带查询参数，变成 /register?uname=lisi
router.push({ path:'/register', query:{uname:'lisi'}})

6、vue-router 命名路由

6.1 命名路由的配置规则

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为 “命名路由”。

示例如下：

const router = new VueRouter({routes: [{path: '/user/:id',name: 'user',  component: User}]
})

使用：

<router-link to ="{ name:'user' ,params: { id: 123 } }">User</router-link>

router.push({ name:'user' ,params: { id: 123 }})

总结

以上只是介绍了Vue路由的基本知识，没有牵扯到路由的拦截，优化等内容，也许可以考虑写个篇外篇在做下介绍。而接下来介绍的是 Vue 的状态管理。

Vue学习笔记（四）—— 前端路由相关推荐

千峰java 笔记整理_JAVA学习笔记系列：菜鸟Vue学习笔记（四）
菜鸟Vue学习笔记(四) 上周学习了使用Vue来操作表单元素进行数据双向绑定,今天我们来学习下Vue中的组件,Vue中的组件作用就是去封装一些常用的页面标签,将其当做一个整体,以便在其他位置直接使用一 ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...
vue学习笔记（四）- cmd无法识别vue命令解决方法
vue学习笔记(四)- cmd无法识别vue命令解决方法参考文章: (1)vue学习笔记(四)- cmd无法识别vue命令解决方法 (2)https://www.cnblogs.com/suRimn ...
Vue学习笔记（五）—— 状态管理Vuex
介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试 ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...
Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
Vue学习笔记（三） —— 前后端交互
简介本文主要是为了介绍前端交互的相关知识,而严格来讲,这也不算是Vue的专属知识,但是却是必须要指定的.本文开始简单说了ajax.jquery 的方式,但是随着SPA开发模式的大火,相继出现了一些新 ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...

Vue学习笔记（四）—— 前端路由

介绍

1、路由基本概念与原理

1.1 路由

1.2 Vue Router

2、vue-router 的基本使用

2.1 基本使用步骤

2.2 路由重定向

3、vue-router 嵌套路由

3.1 嵌套路由用法

4、vue-router 动态路由匹配

4.1 动态匹配路由基本用法

4.2 路由组件传递参数

5、vue-router 编程式导航

5.1 页面导航的两种方式

5.2 编程式导航基本用法

5.3 编程式导航参数规则

6、vue-router 命名路由

6.1 命名路由的配置规则

总结

Vue学习笔记（四）—— 前端路由相关推荐

最新文章

热门文章

Vue学习笔记（四）—— 前端路由

介绍

1、 路由基本概念与原理

1.1 路由

1.2 Vue Router

2、vue-router 的基本使用

2.1 基本使用步骤

2.2 路由重定向

3、vue-router 嵌套路由

3.1 嵌套路由用法

4、vue-router 动态路由匹配

4.1 动态匹配路由基本用法

4.2 路由组件传递参数

5、vue-router 编程式导航

5.1 页面导航的两种方式

5.2 编程式导航基本用法

5.3 编程式导航参数规则

6、vue-router 命名路由

6.1 命名路由的配置规则

总结

Vue学习笔记（四）—— 前端路由相关推荐

最新文章

热门文章

1、路由基本概念与原理