【vue学习笔记】五、路由

本文详细介绍了Vue Router的基本概念、工作原理及实际应用,包括路由配置、前端路由实现、vue-router安装与配置、router-link用法、常见路由技巧如重定向、嵌套路由、动态路由、props传参、查询参数和编程式导航。同时,还讲解了导航守卫的全局前置守卫及其使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

五、路由

1)什么是路由

路由(router)就是对应关系,在前端中路由就是Hash地址和页面的对应关系

在SPA(单页面程序)项目中,不同功能之间的切换要以来于前端路由来完成

2)前端路由的工作方式
  1. 用户点击了页面上的路由链接
  2. 导致URL地址栏中的Hash值发生了变化
  3. 前端路由监听到了Hash地址的变化
  4. 前端路由把当前Hash地址对应的组件渲染到浏览器中

image-20220323182955186

3)实现简易的前端路由

使用动态组件+监听window.onhashchange事件

created(){// 只要当前的 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.comNamee = 'About'
    break
}
}
4)vue-router

vue-router是vue官方给出的路由解决方案

1.vue-router安装与配置的步骤
  1. 安装vue-router包
npm i vue-router
  1. 创建路由模块

在src源代码目录下,新建router/index.js路由模块,并初始化如下代码

//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.向外共享路由的实例对象
export default router
  1. 导入并挂载路由模块

main.js下进行挂载

//导入路由模块,得到router的实例对象
import router from '@/router/index.js'

new Vue({
    render: h => h(App),
    router //挂载路由
})
  1. 声明路由链接和占位符

只要在项目中配置了vue-router就可以在App.vue里使用router-view这个组件了,它是一个占位符,代表要切换的区域

router/index.js里的VueRouter构造函数里使用routers属性绑定hash地址与组件之间的对应关系

const router = new VueRouter(
	routes: [
    //每一个对应关系都叫做一个路由规则
    { path: '/home', component: Home},
    { path: '/about', component: About},
    { path:'/movie', component: Movie}
    ]
)
2.router-link替代a链接

vue-router里可以使用router-link来代替<a>标签实现哈希地址的跳转

<router-link to"/home"></router>
5)vue-router的常见用法
1.路由重定向

路由重定向是指当用户访问A地址时,强制跳转到B地址,从而展示特定的组件页面(可以用来设置默认界面)

const router = new VueRouter(
	routes: [
    //每一个对应关系都叫做一个路由规则
    { path:'/', redirect: '/home'}
    { path: '/home', component: Home},
    { path: '/about', component: About},
    { path:'/movie', component: Movie}
    ]
)
2.嵌套路由

通过路由实现组件的嵌套展示,叫做嵌套路由

要实现嵌套路由,要通过children属性声明子路由规则

src/router/index.js路由模块中,导入需要的组件,并使用children属性声明子路由规则:

注意子路由的路径不要加/

const router = new VueRouter(
	routes: [
    { path: '/home', 
    component: Home,
    children: [
    	{ path: 'tab1', component: Tab1 },
    	{ path: 'tab2', component: Tab2 },
    ]
    },
    ]
)

默认子路由的显示方式可以父路由里加一个redirect重定向,也可以把path值设置为空字符串,则这条路由规则叫做默认子路由

//重定向
const router = new VueRouter(
	routes: [
    { path: '/home', 
    component: Home,
	redirect: '/about/tab1',
    children: [
    	{ path: 'tab1', component: Tab1 },
    	{ path: 'tab2', component: Tab2 },
    ]
    },
    ]
)
//默认子路由
const router = new VueRouter(
	routes: [
    { path: '/home', 
    component: Home,
	redirect: '/about/tab1',
    children: [
    	{ path: '', component: Tab1 },
    	{ path: 'tab2', component: Tab2 },
    ]
    },
    ]
)
3.动态路由

动态路由是指将Hash地址中可变的部分定义为参数向,从而提高路由规则的复用性

vue-router中使用英文的冒号:来定义路由的参数项

//动态路由
{ path: '/movie/:id', component: Moive }

//相当于将下面3个路由规则合并
{ path: '/movie/1', component: Moive },
{ path: '/movie/2', component: Moive },
{ path: '/movie/3', component: Moive },

movie组件中,通过this.$route.params.id来拿到传递的id值

4.为路由规则开启props传参

在绑定路由时,设置props: true即可开启props传参

{ path: '/movie/:id', component: Moive , props: true} //此时在组件中可以通过props接收id
5.路由query和fullPath

在hash地址中?后面的参数项,叫做查询参数

在路由参数对象中,需要使用this.$route.query来访问查询参数

<router-link to"/moive/2?name=zs&age=20"></router-link>

this对象中的path属性只是路径部分,而fullPath是完整的地址

例如:

fullPath: /moive/2?name=zs&age=20

path: /moive/2

6.声明式导航 & 编程式盗汗

在浏览器中,点击链接实现导航的方式,叫做声明式导航,例如:

  • 普通网页中点击<a>链接、vue项目中点击<router-link>都属于声明式导航

在浏览器中,调用API方法实现导航的方式,叫做编程式导航

  • 普通网页中调用location.href跳转到新页面的方式,属于编程式导航
6.1 vue-router中的编程式导航API

vue-router中常用的编程式导航API:

  • this.$router.push('hash地址')
    • 跳转到指定hash地址,并增加一条历史记录
  • this.$router.replace('hash地址')
    • 跳转到指定hash地址,并替换掉当前的历史记录
  • this.$router.go(数值n)
    • 代表在浏览历史中前进和后退(前进为正,后退为负)
    • 如果超过上限则原地不动
    • 可以使用this.$router.back()this.$router.back()

编程式导航可以写在行内,但是一定不能带this否则会报错

7.导航守卫

导航守卫可以控制路由的访问权限

image.png

7.1全局前置守卫

每次发生路由导航跳转时们都会触发全局前置守卫

//创建路由实例对象
const router = new VueRouter({ ... })
                              
//调用路由实例对象的beforeEach方法,即可声明“全局前置守卫”
//每次发生路由导航跳转的时候,都会自动触发fn这个“回调函数”
router.beforeEach(fn)
7.2守卫方法的3个形参

全局前置守卫的回调函数中接收3个形参,格式为

//创建路由实例对象
const router = new VueRouter({ ... })
                              
//调用路由实例对象的beforeEach方法,即可声明“全局前置守卫”
//每次发生路由导航跳转的时候,都会自动触发fn这个“回调函数”
router.beforeEach((to, from, next) => {
    
})
  • to是将要访问的路由的信息对象
  • from是将要离开的路由的信息对象
  • next是一个函数,调用next()表示放行,允许这次路由导航
7.3next函数的3种调用方式

image.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值