Vue路由学习
目标
1. 路由概念学习
2. Vue-router基本使用
3. Vue-router嵌套路由
4. Vue-router动态路由
5. Vue-router路由命名
6. Vue-router编程是导航用法
7. 基于路由的方式实现业务功能
一、路由概念
1.1、前端路由：
概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系
作用：提高用户对网站的体验
1.2、Vue Router
Vue官方提供的路由管理器，路由和Vue.js的核心深度集成，可以非常方便的用于SPA项目开发。
说白了就是根据不同的路径显示不同的页面SPA单页面应用程序：整个页面SPA(Single PageApplication）
单页面应用程序:整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作。
SPA实现原理之一:基于URL地址的hash (hash的变化会导致浏览器记录访问历史的变化、但是haln的变化不会触发新的URL请求)。
在实现SPA过程中，最核心的技术点就是前端路由。
Vue Router包含的功能有：
1、支持HTML5历史模式或者hash模式(实现路由的常用方式)
2、支持嵌套路由
3、支持路由参数
4、支持编程式路由
5、支持命名路由
二、Vue-router基本使用
0、基本使用步骤
1、引入相关的库文件
2、添加路由链接
3、添加路由填充位
4、定义路由组件
5、配置路由规则并创建路由实例
6、把路由挂载到Vue根实例中
以下是非脚手架结构学习
1、引入相关库文件
<!-- 导入Vue文件,用于为全局对象Window挂载 Vue构造函 数 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue .js">
</script>
<!-- 导入vue-router文件， 用于为全局对象Window挂载 vue-router构造函数 -->
<script src="https://unpkg.com/vue- router/dist/vue-router.js">
</script>
2、添加路由链接
<!--router-link是Vue中提供的标签,默认会被渲染为 a标 签 -->
<!-- to 属性默认会被渲染成 href属性 -->
<!-- to 属性的值 默认会被渲染成 #开头的hash地址 -->
<router-link to="/tom">Tom</router-link>
<router-link to="/jerry">Jerry</router-link>
3、添加路由填充位
路由填充位,也叫做路由占位符,通过路由规则匹配到的组
件,将会被渲染到router-view所在的位置
<router-view></router-view>
4、定义路由组件
定义路由跳转展示的内容组件
let Tom = {
template : `<h1>Tom组件</h1>`
};
let Jerry = {
template : `<h1>Jerry组件</h1>`
};
5、配置路由规则并创建路由实例
//用于配置路由规则的实例
const router = new VueRouter({
//存储所有的路由规则的数组
routes: [
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展示的组件
//注意component只接收组件对象
{path : '/tom', component : Tom},
{path : '/jerry', component : Jerry}
] });
6、把路由挂载到Vue根实例中为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上
let app = new Vue({
el : "#app",
data : {},
methods: {},
//挂载实例对象
router : router
});
7、测试效果
8、路由重定向
路由重定向指的是:用户在访问地址A的时候，强制用户跳转到地址B，从而展示特定的组件页面;
Vue实现思路：通过路由规则中的redirect属性 ，指定一个新的路由地址，可以很方便地设置路由的重定向
其中，path表示需要被重定向的原地址，redirect表示将要 被重定向到的新地址
routes: [
{path : '/',redirect : '/tom'},
{path : '/tom', component : Tom},
{path : '/jerry', component : Jerry}
]
三、嵌套路由
嵌套路由指的是通过路由规则的层级嵌套，可以在页面上展示出复杂的组件结构关系
2.1、嵌套路由用法
1、需求引入
- 点击父级路由链接显示模板内容
- 模板内容中又有子级路由链接
- 点击子级路由链接显示子级模板内容
2、实现思路
- 在父路由中添加子路由链接和路由占位符
- 配置路由规则，在父路由规则中，通过children属性，添加子路由规则
//在父路由中添加子路由链接和路由占位符
let Jerry = {
template : `<div> <h1>Jerry组件</h1>
<hr/>
<!-- 子路由链接-->
<router-link to="/jerry/j1">j1</router-link>
<router-link to="/jerry/j2">j2</router-link>
<!-- 子路由占位符-->
<router-view /> </div>` };
//省略创建子路由组件
{
//children数组表示子路由规则
path : '/jerry', component : Jerry,
children : [
{path : '/jerry/j1',component : j1},
{path : '/jerry/j2',component : j2}
] }
三、动态路由匹配
3.1、动态路由基本使用
思考：有以下3个路由链接
<router-link to="/tom/1">Tom1</router-link>
<router-link to="/tom/2">Tom2</router-link>
<router-link to="/tom/3">Tom3</router-link>
<router-link to="/tom/4">Tom4</router-link>
定义如下路由规则，是否可行？如果有更多又该如何？
{path : '/tom/1',component : Tom}
{path : '/tom/2',component : Tom}
{path : '/tom/3',component : Tom}
{path : '/tom/4',component : Tom}
什么是动态路由参数：
如果某些路由规则中，一部分是完全一样的，一部分是动态变化的，那么就可以将这部分动态变化的部分形成动态路由参数。
实现方式：通过动态路由参数的模式进行路由匹配
如果进行动态参数匹配语法实例：
routes: [ {path : '/tom/:id', component : Tom},
]
路由组件通过$route.params 获取路由参数
路由中如何使用动态参数语法实例：
template: `
<div>{{$route.params.id}}</div>`
分析共性，抽出公用路由，设置参数，获取使用
3.2、路由组件传递参数---props
$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。
1、用法1：props设置布尔类型
将props 设置为true , 开启props传参
routes: [
{path : '/tom/:id', component : Tom,props : true},
]
//路由组件
props : ['id'],
//使用路由参数
template : `<h1>Tom组件{{id}}</h1>`
2、props的值为对象类型
将props 设置为对象,它会被按原样设置为组件属性。只会传递对象数据
{path : '/tom/:id', component : Tom,
props : {name : 'zs'}}
props : ['name'],
template : `<h1>Tom组件{{$route.params.id}} {{name}}</h1>`
3、props的值为函数
将props 设置为函数,将静态值与基于路由的值结合动态传参可以使用 route.params获取
{path : '/tom/:id', component : Tom,
props:route => ({name : '张三',id : route.params.id})},
props : ['name','id'],
template : `<h1>Tom组件{{id}} {{name}}</h1>`
四、命名路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
语法:使用name关键字 进行命名
routes: [
{ path: '/user/:userId', name: 'user', component: User }
]
})
在路由链接中使用 :to属性设置链接的地址,并且可以使用
params携带参数
<router-link
:to="{ name: 'user',params: { userId: 123
}}">User
</router-link>
五、编程式导航
5.1、页面导航的两种方式
1.声明式导航:通过点击链接实现导航的方式，叫做声明式导航
例如:普通网页中的a链接或vue中的
2.编程式导航:通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
例如:普通网页中的location.href
5.2、Vue实现编程式导航
常见编程式导航Api如下：
- this.$router.push('hash地址')
- this.$router.go(n)
// 字符串
$router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId:
'123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan:
'private' }})