vue路由
路由的概念和原理
什么是路由
路由(英文:router)就是对应关系
SPA和路由
SPA(单页面应用程序) 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。此时,不同组件之间的切换需要通过前端路由来实现。
在 SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成!
前端路由的工作方式
- 用户点击了页面上的路由链接
- 导致了 URL 地址栏中的 Hash 值发生了变化
- 前端路由监听了到 Hash 地址的变化
- 前端路由把当前 Hash 地址对应的组件渲染都浏览器中
vue-router
什么是 vue-router
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。
vue-router 安装和配置
- 安装 vue-router 包
1
npm install vue-router@3.5.2 -S
- 创建路由模块
在 src 源代码目录下,新建 router/index.js 路由模块,并初始化如下的代码1
2
3
4
5
6
7
8
9
10
11
12// 1. 导入 vue 和 vuerouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'
// 2. 调用 Vue.use()函数, 把 VueRouter 安装为 Vue的插件
Vue.use(VueRouter)
// 3. 创建路由的实例对象
const router = new VueRouter()
// 4. 向外共享router实例对象
export default router - 导入并挂载路由模块
在src/main.js
入口文件中,导入并挂载路由模块1
2
3
4
5
6
7
8
9
10
11
12
13
14import Vue from 'vue'
import App from './App2.vue'
// 导入路由模块,目的:拿到路由的实例对象
// 在进行模块化导入的时候,如果给定的是文件夹,则默认导入这个文件夹下,名字叫做 index.js 的文件
import router from '@/router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 在 Vue 项目中,要想把路由用起来,必须把路由实例对象,通过下面的方式进行挂载
// router: 路由的实例对象
router
}).$mount('#app') - 声明路由链接和占位符
1
2
3
4
5
6
7
8
9
10
11
12<template>
<div class="app-container">
<h1>App2 组件</h1>
<!--路由链接--->
<!-- 当安装和配置了 vue-router 后,就可以使用 router-link 来替代普通的 a 链接了 -->
<router-link to="/home">首页</router-link>
<hr />
<!-- 只要在项目中安装和配置了 vue-router,就可以使用 router-view 这个组件了 -->
<!-- 它的作用很单纯:路由的占位符 -->
<router-view></router-view>
</div>
</template> - 定义路由规则
在src/router/index.js
路由模块中,通过routes
数组声明路由的匹配规则这样以后,通过路由连接就可以显示对应的组件了1
2
3
4
5
6
7
8
9
10
11
12
13//导入需要展示的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
// 创建路由实例的时候,写入路由规则
const router = new VueRouter({
routes:[
{path:'/home',component:Home},
{path:'/movie',component:Movie},
{path:'/about',component:About}
]
})
路由重定向
路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面。通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向
1 | // 创建路由实例的时候,写入路由规则 |
嵌套路由
通过路由实现组件的嵌套展示,叫做嵌套路由。

下面我们来实现嵌套路由
声明子路由链接和子路由占位符
想要使用嵌套路由,那么子组件中就需要有路由链接和路由占位符,下面在 About.vue
中声明子路由链接和子路由占位符
注意在声明路由链接时,前面需要加上该组件的路由然后再跟子路由
1 | <template> |
声明子路由规则
在 src/router/index.js
路由模块中,导入需要的组件,并使用 children
属性声明子路由规则
注意子路由写的时候,path习惯不写前面的
/
1 | // 创建路由的实例对象 |
默认子路由
在上面的子路由规则写好后,我们直接点击定位到about
发现子路由的组件没有显示,我们可以通过设置重定向来让它显示
1 | // 创建路由的实例对象 |
除了重定向我们可以使用默认子路由来实现,如果 childre
数组中,某个路由规则 path 值为空字符串,则这条路由规则叫做“默认子路由”
注意,使用默认子路由后,在写组件的子路由链接时,默认的子路由不要再加后边的路径,直接
<router-link to="/about">tab1</router-link>
就好
1 | // 创建路由的实例对象 |
动态路由匹配
如果我们需要根据不同的电影id来访问电影详情,写下如下的路由链接
1 | <router-link to="/movie/1">洛基</router-link> |
为了不给每个连接都定义一个路由规则,提高路由规则的复用性,我们就需要使用动态路由匹配
动态路由指的是:把 Hash 地址中可变的部分定义为参数项,从而提高路由规则的复用性。
在 vue-router 中使用英文的冒号:
来定义路由的参数项。通过props
属性开启 props 传参,方便拿到动态参数
1 | // 创建路由的实例对象 |
既然需要根据不同的id来显示Movie
组件的内容,那么我们就需要在movie组件中得到id的动态值
我们通过打印 Movie组件的 this
来看路由相关的信息,并且使用 props
来接收传来的动态的值
1 | <template> |
路由的两种参数
路径参数: 在 hash 地址中, / 后面的参数项 比如 /movie/1
查询参数: 在 hash 地址中,? 后面的参数项 比如 /movie/2?name=zs&age=20
1 | <!-- 注意1:在 hash 地址中, / 后面的参数项,叫做“路径参数” --> |
导航跳转
在浏览器中,点击链接实现导航的方式,叫做声明式导航。例如:
⚫ 普通网页中点击 <a>
链接、vue 项目中点击 <router-link>
都属于声明式导航
在浏览器中,调用 API 方法实现导航的方式,叫做编程式导航。例如:
⚫ 普通网页中调用 location.href 跳转到新页面的方式,属于编程式导航
vue-router 中编程式导航API
vue-router 提供了许多编程式导航的 API,其中最常用的导航 API 分别是:
this.$router.push(‘hash 地址’)
⚫ 跳转到指定 hash 地址,展示对应组件,并增加一条历史记录
this.$router.replace(‘hash 地址’)
⚫ 跳转到指定的 hash 地址,展示对应组件,并替换掉当前的历史记录
this.$router.go(数值 n)
⚫ 可以在浏览历史中前进和后退 n 个页面
$router.back()
⚫ 在历史记录中,后退到上一个页面
$router.forward()
⚫ 在历史记录中,前进到下一个页面
1 | <template> |
导航守卫
导航守卫可以控制路由的访问权限

全局前置守卫
在 src/router/index.js
中使用 router.beforeEach(fn)
给路由对象设置全局前置守卫,其中 fn 为全局前置守卫的回调函数
fn回调函数有三个形参 to\from\next:
- to 表示将要访问的路由的信息对象
- from 表示将要离开的路由的信息对象
- next() 函数表示放行的意思
我们通过操作 to / from 就可以进行路由守卫的工作,下面例子中实现必须登录后才可以进入主页
1 | // src/router/index.js 就是当前项目的路由模块 |
使用vue-cil创建有路由的项目
创建的主要步骤和之前大致相同,详细可以看 vue-cil的使用
这里主要说两点和路由相关的不同的地方
- 创建时选择路由

- 使用哈希路径的路由
下面是询问你是否使用 history
形式的路由模式,我们选择 NO
,我们用的是hash的(即使用 #
开头的)

创建完后,会发现项目结构和之前有一点不同 src
目录下除了 components
还多了一个 views
文件夹

views
文件夹也是放组件的,通过路由切换的组件一般都放在这里