1.初识路由
1.后端路由
2.前端路由
1.Hash模式
2.HTML5模式
2.初识Vue Router
1. Vue Router的安装
在Vue 3项目中演示Vue Router的安装
步骤一:
步骤二：
步骤三：
2. Vue Router的基本使用
1. 定义路由组件
<!-- Home.vue文件 -->
<template>
<div class="home-container">
<h3>Home组件</h3>
</div>
</template>
<style scoped>
.home-container {
min-height: 150px;
background-color: #f2f2f2;
padding: 15px;
}
</style>
<!-- About.vue文件 -->
<template>
<div class="about-container">
<h3>About组件</h3>
</div>
</template>
<style scoped>
.about-container {
min-height: 150px;
background-color: #f2f2f2;
padding: 15px;
}
</style>
2. 定义路由链接和路由视图
<template>
<div class="app-container">
<h1>App根组件</h1>
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<style scoped>
.app-container {
text-align: center;
font-size: 16px;
}
.app-container a {
padding: 10px;
color: #000;
}
.app-container a.router-link-active {
color: #fff;
background-color: #000;
}
</style>
3. 创建路由模块
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About },
]
})
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/home', component: () => import('./components/Home.vue') },
{ path: '/about', component: () => import('./components/About.vue') },
]
})
4. 导入并挂载路由模块
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router.js' // 导入路由模块
const app = createApp(App)
app.use(router) // 挂载路由模块
app.mount('#app')
多学一招：更改路由链接激活项的类名
3.路由重定向
4.嵌套路由
演示嵌套路由的实现
步骤一：
步骤二：
<template>
<div>Tab1组件</div>
</template>
<style scoped>
div {
text-align: left;
background-color: #9dc4e5;
}
</style>
步骤三：
<template>
<div>Tab2组件</div>
</template>
<style scoped>
div {
text-align: left;
background-color: #ffba00;
}
</style>
步骤四：
<template>
<div class="about-container">
<h3>About组件</h3>
<router-link to="/about/tab1">tab1</router-link>
<router-link to="/about/tab2">tab2</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<style scoped>
.about-container {
min-height: 150px;
background-color: #f2f2f2;
padding: 15px;
}
.about-container a {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 10px;
color: #000;
margin: 0 5px;
}
.about-container a.router-link-active {
color: #000;
background-color: #deebf6;
}
</style>
5.动态路由
1 .动态路由概述
2 .获取动态路径参数值
使用$route.params获取参数值
步骤一：
步骤二：
步骤三：
步骤四：
6.命名路由
演示如何使用命名路由
步骤一：
步骤二：
7.编程式导航
1. push()方法
演示push()方法的使用
步骤一：
步骤二：
2. replace()方法
3. go()方法
演示go()方法的使用
步骤一：
步骤二：
8.导航守卫
演示全局导航守卫的使用
步骤一：
步骤二：
步骤三:
router.beforeEach((to, from, next) => {
let isLogin = false
if (to.name == 'MovieDetails') {
if (isLogin) { next()
} else {
next({ name: 'Login' })
}
} else { next() }
})
