Vue.js 第五章 路由

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() }
})