Vue前端路由
路由(英文:router)就是对应关系。
SPA与前端路由
SPA指的是单页面应用,所有组件的展示与切换都在这唯一的一个页面内完成。
此时,不同组件之间切换都需要通过前端路由来实现。
前端路由
前端路由是指Hash地址与组件之间的对应关系。
前端路由的工作方式
- 用户点击了页面上的路由链接。
- 导致了URL地址栏中的Hash值发生变化。
- 前端路由监听到了Hash地址的变化。
- 前端路由把当前Hash地址对应的组件渲染到浏览器中。
结论:前端路由,指的是Hash地址与组件之间的对应关系。
实现简易的前端路由
通过<component>标签,结合comName动态渲染组件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14<template>
<component :is="comName"></component>
</template>
<script>
export default {
name: 'App',
data() {
return {
comName: 'Home'
}
}
}
</script>在App.vue组件中,为<a>链接添加对应的hash值。
1
2
3<a href="#/home">首页</a>
<a href="#/movie">电影</a>
<a href="#/about">关于</a>在created生命周期函数中,监听浏览器地址栏中hash地址的变化,动态切换要展示的组件的名称。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17created() {
// 只要当前的 App 组件一被创建,就立即监听 window 对象的 onhashchange 事件
window.onhashchange = () => {
console.log('监听到了 hash 地址的变化', location.hash)
switch (location.hash) {
case '#/home':
this.comName = 'Home'
break
case '#/movie':
this.comName = 'Movie'
break
case '#/about':
this.comName = 'About'
break
}
}
}
Vue-Router
vue-router是Vue官方提供的路由解决方案。
安装和配置
在vue2项目中,安装vue-router的命令如下:
1 | npm i vue-router@3.5.2 -S |
创建路由模块
在src目录下,新建router/index.js文件。初始化如下代码:
1 | // 1.导入vue和vue-router |
导入并挂载路由模块
在 src/main.js 中,导入并挂载路由模块。
1 | import Vue from 'vue' |
声明路由链接和占位符
在 /src/App.vue 组件中,使用vue-router提供的<router-link>、<router-view>声明路由链接和占位符。
1 | <template> |
声明路由匹配规则
1 | // 1. 导入需要的组件 |
Vue-Router的常见用法
路由重定向
路由重定向是指:用户在访问地址A时,强制用户跳转到地址C,从而展示特定的组件。
通过路由规则的redirect属性,指定一个新的路由地址,可以很方便设置重定向:
1 | const router = new VueRouter({ |
嵌套路由
通过路由实现组件的嵌套展示,叫做嵌套路由。
声明子路由链接和子路由占位符
1 | <template> |
通过children属性声明子路由规则
1 | const router = new VueRouter({ |
动态路由匹配
动态路由的概念:把Hash地址中可变的部分定义为参数项,从而提高路由规则的复用性。
在vue-router中使用(:)来定义动态路由的参数项。
可以使用this.$router.params.id对象来访问参数值。
1 | <template> |
使用props接收路由参数
为了简化路由获取形式,可以使用props进行接收参数。
1 | { path: '/movie/:id', component: Movie, props:true } |