《前端开发框架》课件-第5章 路由

5.2初识Vue

Router5.2.1

Vue

Router的安装先定一个小目标！掌握Vue

Router的安装，能够独立安装Vue

Router5.2.1

Vue

Router的安装Vue

Router有多个版本，那么Vue

3适用于VueRouter哪个版本？5.2.1

Vue

Router的安装Vue

Router有多个版本，其中，VueRouter

4适用于Vue

3，而Vue

Router

3适用于Vue

2。由于本书重点讲解Vue

3，所以接下来将基于Vue

Router4进行讲解。5.2.1

Vue

Router的安装在Vue

3项目中演示Vue

Router的安装在D:\vue\chapter05目录下创建一个新的Vue

3项目。步骤1yarncreatevitecdmy-routeryarn--templatevue步骤2步骤3项目名称5.2.1

Vue

Router的安装在Vue

3项目中演示Vue

Router的安装在my-router目录中，通过yarn安装Vue

Router。步骤1yarnadd--步骤2步骤3项目运行时依赖@4表示安装vue-router的版本号为4，即VueRouter

45.2.1

Vue

Router的安装在Vue

3项目中演示Vue

Router的安装安装完成后，打开package.json文件，查看Vue

Router的版本号。步骤1"dependencies":{"vue":

"^3.2.45","vue-router":"4"},步骤2步骤35.2.2

Vue

Router的基本使用先定一个小目标！掌握Vue

Router的基本使用方法，能够在项目中配置Vue

Router5.2.2

Vue

Router的基本使用路由的基本使用步骤分为以下4步。定义路由组件定义路由链接和路由视图创建路由模块导入并挂载路由模块12345.2.2

Vue

Router的基本使用1.定义路由组件在src\components目录下创建Home.vue文件和About.vue文件。<!--Home.vue文件--><template><!--About.vue文件--><template><divclass="home-container"><h3>Home组件</h3></div><divclass="about-container"><h3>About组件</h3></div></template></template><stylescoped>.home-container{min-height:150px;background-color:#f2f2f2;padding:15px;<stylescoped>.about-container{min-height:150px;background-color:#f2f2f2;padding:15px;}}</style></style>5.2.2

Vue

Router的基本使用2.定义路由链接和路由视图使用<router-view>标签定义路由视图，该标签会被渲染成当前路由对应的组件。通过<router-link>标签定义路由链接方便在不同组件之间切换。<template><divclass="app-container"><h1>App根组件</h1><router-link

to="/home">首页</router-link><router-link

to="/about">关于</router-link><hr><router-view></router-view></div></template>5.2.2

Vue

Router的基本使用>>接上页代码<stylescoped>.app-container{text-align:

center;font-size:

16px;}.app-containera{padding:10px;color:

#000;}.app-containera.router-link-active

{color:

#fff;background-color:#000;}</style>5.2.2

Vue

Router的基本使用3.创建路由模块①在src目录下创建router.js文件作为路由模块，并在该文件中导入路由相关函数。import{createRouter,

createWebHashHistory}from

'vue-router'②在router.js文件中导入需要被路由控制的Home组件和About组件。importHomefrom

'./components/Home.vue'importAboutfrom

'./components/About.vue'5.2.2

Vue

Router的基本使用③在router.js文件中创建路由实例对象。constrouter=createRouter({history:createWebHashHistory(),注意：routes:[步骤②和③的组件加载方式是一次加载所有组件，除了这种方式外，还可以通过懒加载的方式动态加载组件。（下一页会讲到）{path:'/home',

component:Home},{path:'/about',component:About},]})④在router.js文件中导出路由实例对象。exportdefaultrouter5.2.2

Vue

Router的基本使用下面讲解如何通过懒加载的方式动态加载组件。l

删除第②步的代码。l

将第③步的代码修改为如下代码。constrouter=createRouter({history:createWebHashHistory(),routes:[{path:'/home',

component:()=>import('./components/Home.vue')},{path:'/about',component:()=>import('./components/About.vue')},]})5.2.2

Vue

Router的基本使用4.导入并挂载路由模块在src\main.js文件中导入并挂载路由模块。import{createApp}from

'vue'import'./style.css'importAppfrom

'./App.vue'importrouterfrom

'./router.js'

//导入路由模块constapp=createApp(App)app.use(router)//挂载路由模块app.mount('#app')5.2.2

Vue

Router的基本使用执行yarndev命令启动服务。服务启动成功后，在浏览器中访问:5173/，使用路由后的初始页面效果、单击“首页”路由链接后的Home组件的效果、单击“关于”路由链接后的About组件的效果如下图所示。使用路由后的初始页面效果Home组件的效果About组件的效果5.2.2

Vue

Router的基本使用多学一招：更改路由链接激活项的类名在默认情况下，路由链接激活项的类名为router-link-active。如果需要更改类名，可以在创建路由实例对象时通过linkActiveClass属性设置一个类名。constrouter=createRouter({linkActiveClass:'router-active',……})5.3路由重定向5.3

路由重定向先定一个小目标！掌握路由重定向的使用方法，能够解释路由重定向的实现5.3

路由重定向什么是路由重定向？5.3

路由重定向在开发过程中，可能希望当用户访问不同的路径时，页面中显示同一个组件，这时就需要用到路由重定向。路由重定向可以使用户在访问一个URL地址时，强制跳转到另一个URL地址，从而展示特定的组件。通过路由匹配规则中的redirect属性可以指定一个新的路由地址，从而实现路由重定向。5.3

路由重定向下面演示路由重定向的使用方法。修改src\router.js文件，实现当用户访问“/”路径时，将路由重定向到“/home”路径。constrouter=createRouter({history:createWebHashHistory(),routes:[{path:'/',redirect:'/home'

},{path:'/home',

component:import('./components/Home.vue')},{path:'/about',component:import('./components/About.vue')}]})5.4嵌套路由5.4

嵌套路由先定一个小目标！掌握嵌套路由的使用方法，能够实现路由的嵌套5.4

嵌套路由什么是嵌套路由？5.4

嵌套路由嵌套路由是指通过路由实现组件的嵌套展示，它主要由页面结构决定。实际项目中的应用界面通常由多层嵌套的组件组合而成，为了使多层嵌套的组件能够通过路由访问，路由也需要具有嵌套关系，也就是在路由里面嵌套它的子路由。5.4

嵌套路由下面演示嵌套路由的简单配置。在src\router.js文件的路由匹配规则中通过children属性定义子路由匹配规则。routes:[{path:'父路由路径',component:父组件,children:[{path:'子路由路径1',component:子组件1},{path:'子路由路径2',component:子组件2}]}]5.4

嵌套路由在组件中定义子路由链接的语法格式如下。<router-link

to="/父路由路径/子路由路径"></router-link>注意5.4

嵌套路由演示嵌套路由的实现在src\components目录下创建pages目录，用于存放子路由组件。步骤1步骤2步骤3步骤4步骤55.4

嵌套路由演示嵌套路由的实现创建src\components\pages\Tab1.vue文件。步骤1步骤2<template><div>Tab1组件</div></template><stylescoped>div{步骤3text-align:

left;background-color:#9dc4e5;}步骤4步骤5</style>5.4

嵌套路由演示嵌套路由的实现创建src\components\pages\Tab2.vue文件。步骤1步骤2<template><div>Tab2组件</div></template><stylescoped>div{步骤3text-align:

left;background-color:#ffba00;}步骤4步骤5</style>5.4

嵌套路由演示嵌套路由的实现在component\About.vue文件中添加子路由链接和子路由视图。步骤1步骤2<template><divclass="about-container"><h3>About组件</h3><router-link

to="/about/tab1">tab1</router-link><router-link

to="/about/tab2">tab2</router-link><hr>步骤3步骤4步骤5<router-view></router-view></div></template><stylescoped>.about-container{5.4

嵌套路由演示嵌套路由的实现>>接上页代码步骤1步骤2min-height:150px;background-color:#f2f2f2;padding:15px;}步骤3.about-containera{padding:10px;border:1px

solid#ccc;border-radius:

5px;padding:5px

10px;color:

#000;步骤4步骤5margin:05px;}5.4

嵌套路由演示嵌套路由的实现>>接上页代码步骤1步骤2.about-containera.router-link-active

{color:

#000;background-color:#deebf6;}步骤3</style>步骤4步骤55.4

嵌套路由演示嵌套路由的实现修改src\router.js文件，在routes中导入Tab1组件和Tab2组件，并使用children属性定义子路由匹配规则。步骤1步骤2routes:[{path:'/',redirect:'/about'},{path:'/home',

component:()=>import('./components/Home.vue')},步骤3{path:'/about',component:()=>import('./components/About.vue'),步骤4步骤5children:[{path:'tab1',component:()=>import('./components/pages/Tab1.vue')

},{path:'tab2',component:()=>import('./components/pages/Tab2.vue')

}]}]5.4

嵌套路由在浏览器中访问:5173/。页面打开后，会自动重定向到About组件的路由，页面显示About组件；单击“tab1”链接，页面显示About组件中的Tab1组件；单击“tab2”链接，页面显示About组件中的Tab2组件，如下图所示。About组件中的Tab1组件About组件中的Tab2组件About组件5.5.2

获取动态路径参数值先定一个小目标！掌握动态路径参数值的获取，能够使用$route.params或props获取参数值5.5.2

获取动态路径参数值获取动态路径参数值的2种方式：使用$route.params获取参数值、使用props获取参数值。假设在Movie组件中有“电影1”“电影2”“电影3”这3个链接，单击它们会跳转到同一个MovieDetails组件，并展示对应的电影id，用于区分不用id对应的详情页的数据。5.5.2

获取动态路径参数值使用$route.params获取参数值新建src\components\Movie.vue文件，在该文件中定义3个路由链接和路由视图。步骤1步骤2步骤3步骤4<template><divclass="movie-container">路由链接路由视图</div></template><style>.movie-container{5.5.2

获取动态路径参数值使用$route.params获取参数值>>接上页代码步骤1步骤2步骤3步骤4min-height:150px;background-color:#f2f2f2;}.movie-containera{padding:05px;font-size:

18px;border:1px

solid#ccc;border-radius:

5px;color:

#000;margin:05px;}</style>5.5.2

获取动态路径参数值使用$route.params获取参数值修改src\App.vue文件，在“关于”路由链接下方补充定义“电影”路由链接。步骤1步骤2步骤3步骤4<router-link

to="">电影</router-link>目标地址5.5.2

获取动态路径参数值使用$route.params获取参数值创建src\components\MovieDetails.vue文件，使用$route.params.id获取参数id的值。步骤1步骤2步骤3步骤4<template><p>电影{{}}页面</p></template>获取动态匹配的id参数的值5.5.2

获取动态路径参数值使用$route.params获取参数值修改src\router.js文件，在routes中添加路由匹配规则。步骤1步骤2步骤3routes:[{path:'/',redirect:'/movie'},//此处省略了/home和/about的路由代码{path:'/movie',

component:()=>import('./components/Movie.vue'),children:[{path:':id',component:()=>import('./components/movieDetails.vue')}步骤4]}]5.5.2

获取动态路径参数值在浏览器中访问:5173/。Movie组件初始页面效果、单击“电影1”链接，跳转到MovieDetails组件的效果，如下图所示。Movie组件初始页面效果跳转到MovieDetails组件5.5.2

获取动态路径参数值使用props获取参数值：Vue

Router允许在路由匹配规则中开启props传参。①修改src\components\MovieDetails.vue文件，使用props接收路由规则中匹配到的参数。②在src\router.js文件中，为“:id”路径的路由开启props传参。<template>{<p>电影{{id}}页面</p></template><scriptsetup>constprops=defineProps({id:Stringpath:':id',component:()=>import('./components/movieDetails.vue'),props:true}})</script>5.6命名路由5.6

命名路由先定一个小目标！掌握命名路由的使用方法，能够解释命名路由的实现5.6

命名路由为什么使用命名路由？5.6

命名路由使用路由时，一般会先在routes属性中配置路由匹配规则，然后在页面中使用<router-link>的to属性跳转到指定目标地址。但这种方式存在一些弊端，例如，当目标地址比较复杂时，不便于记忆；当地址发生变化时，需要同步修改所有使用了该地址的代码，会增加开发的工作量。为此，Vue

Router提供了命名路由。5.6

命名路由在定义路由匹配规则时，使用name属性为路由匹配规则定义路由名称，即可实现命名路由。当路由匹配规则有了路由名称后，在定义路由链接或执行某些跳转操作时，可以直接通过路由名称表示相应的路由，不再需要通过路由路径表示相应的路由。使用命名路由的语法格式如下。{path:'路由路径',name:'路由名称',component:组件}注意5.6

命名路由在<router-link>标签中使用命名路由时，需要动态绑定to属性的值为对象。当使用对象作为to属性的值时，to前面要加一个冒号，表示使用v-bind指令进行绑定。在对象中，通过name属性指定要跳转到的路由名称，使用params属性指定跳转时携带的路由参数，语法格式如下。<router-link

:to="{name:路由名称,params:{参数名:参数值}}"></router-link>5.6

命名路由使用命名路由实现单击Home组件的“跳转到MovieDetails组件”链接跳转到MovieDetails组件，并在页面中获取id值。5.6

命名路由演示如何使用命名路由在src\components\Home.vue文件中的<router-link>标签中动态绑定to属性的值，指定要跳转到的路由名称，并传递参数。步骤1<template><divclass="home-container"><h3>Home组件</h3><router-link

:to="{name:'MovieDetails组件</router-link></div>',params:{id:3}}">跳转到步骤2</template>要跳转到MovieDetails路由5.6

命名路由演示如何使用命名路由在src\router.js文件中，将“:id”路径的路由名称定义为MovieDetails。步骤1{path:':id',,component:()=>import('./components/movieDetails.vue'),props:true}定义路由名称步骤25.6

命名路由在浏览器中访问:5173/。单击“首页”链接后的页面效果、单击“跳转到MovieDetails组件”链接后的页面效果，如下图所示。单击“首页”链接后的页面效果单击“跳转到MovieDetails组件”链接后的页面效果5.7编程式导航5.7

编程式导航先定一个小目标！掌握编程式导航的使用方法，能够灵活应用编程式导航5.7

编程式导航什么是编程式导航？5.7

编程式导航在Vue中，页面有两种导航方式，分别是声明

式

导

航

和

编

程

式

导

航

。

其

中

，

使

用<router-link>标签定义导航链接的方式属于声明式导航。而编程式导航是先通过useRouter()函数获取全局路由实例，然后通过调用全局路由实例实现导航。5.7

编程式导航Vue

Router提供了useRouter()函数，使用它可以获取全局路由实例，该全局路由实例中提供了常用的push()方法、replace()方法和go()方法，获取全局路由实例的示例代码如下。<scriptsetup>import{useRouter}from

'vue-router'const=useRouter()</script>全局路由实例5.7

编程式导航1.push()方法push()方法会向历史记录中添加一个新的记录，以编程方式导航到一个新的URL。当用户单击浏览器后退按钮时，会回到之前的URL。push()方法的参数可以是一个字符串路径，或者一个描述地址的对象，示例代码如下。router.push('/about/tab1')//字符串路径router.push({

path:'/about/tab1'})//带有路径的对象router.push({

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

path:'/user',query:

{id:'1'}})router.push({

path:'/user',hash:'#admin'

})//命名路由//带查询参数，如：/user?id=1//带有Hash值，如：/user#admin5.7

编程式导航如果在参数的对象中提供了path，则params会被忽略。为了传递参数，需要提供路由的name或者手动拼接带有参数的path，示例代码如下。constid='123'router.push({

name:'/user',params:{userId}})//跳转到/user/123router.push({

path:`/user/${userId}`})//以下是params不生效的情况//跳转到/user/123router.push({

path:'/user',params:{userId}})//跳转到/user5.7

编程式导航使用push()方法实现单击Home组件的“跳转到MovieDetails组件”链接跳转到MovieDetails组件，并在页面中获取id值。5.7

编程式导航演示push()方法的使用修改src\components\Home.vue文件，定义一个按钮，用于跳转到MovieDetails组件，并传递参数。步骤1<template><divclass="home-container"><h3>Home组件</h3><ahref="#"@click.prevent="">跳转到MovieDetails组件</a></div>步骤2</template>绑定gotoMovie()方法5.7

编程式导航演示push()方法的使用在src\components\Home.vue文件中编写gotoMovie()方法，调用router.push()方法实现路由跳转，需要设置要跳转到的路由名称和携带的路由参数。步骤1<scriptsetup>import{useRouter}from

'vue-router'constrouter=useRouter()步骤2constgotoMovie=movieId=>{router.push({name:'MovieDetails',params:{id:movieId}})}</script>5.7

编程式导航2.replace()方法replace()方法与push()方法类似，都是以编程方式导航到一个新的URL。replace()方法在导航后不会向历史记录中添加新的记录，而是会替换历史记录中的当前记录。在声明式导航中，为<router-link>标签添加replace属性也能实现与replace()方法类似的效果，示例代码如下。//编程式导航router.replace({

path:'/user'})<!--声明式导航--><router-link

:to="{path:'/user'}"replace></router-link>5.7

编程式导航3.go()方法go()方法用于实现前进或后退的效果，其参数表示历史记录中前进或后退的步数，类似于window.history.go()，相应的地址栏也会发生改变。l

go(1)表示前进一条记录。l

go(-1)表示后退一条记录。5.7

编程式导航使用go()方法实现单击MovieDetails组件的“后退”按钮后返回到Home组件的效果。5.7

编程式导航演示go()方法的使用修改src\components\MovieDetails.vue文件，在该文件中定义一个按钮，用于后退到上一个组件页面。步骤1<template><p>电影{{id}}页面</p><button@click="</template>">后退</button>步骤2绑定goBack()方法5.7

编程式导航演示go()方法的使用在src\components\MovieDetails.vue文件中编写goBack()方法，调用router.go()方法实现后退效果。步骤1import{useRouter}from

'vue-router'constrouter=useRouter()constgoBack=()=>{router.go(-1)步骤2}5.7

编程式导航在浏览器中访问:5173/。先单击“首页”链接切换到首页，然后单击“跳转到MovieDetails组件”，查看添加了“后退”按钮的页面效果，如下图所示。单击“首页”链接后的页面效果单击“跳转到MovieDetails组件”的页面效果5.8导航守卫5.8

导航守卫先定一个小目标！掌握导航守卫的使用方法，能够实现路由访问权限的控制5.8

导航守卫什么是导航守卫？5.8

导航守卫导航守卫用于控制路由的访问权限。例如，访问后台主页时，需要用户处于已登录状态，如果没有登录，则跳转到登录页面。用户在登录页面进行登录操作，若登录成功，则跳转到后台主页；若登录失败，则返回登录页面。5.8

导航守卫在登录功能中使用导航守卫的效果，如下图所示。5.8

导航守卫导航守卫主要分为全局导航守卫、导航独享守卫和组件导航守卫。123全局导