文章目录
路由简介
路由是什么
路由就是根据不同的 URL 地址展示不同的内容或页面。
页面切换
路由的作用
- 单页应用程序(SPA)中,路由可以实现不同视图之间的无刷新切换,提升用户体验;
- 路由还可以实现页面的认证和权限控制,保护用户的隐私和安全;
- 路由还可以利用浏览器的前进与后退,帮助用户更好地回到之前访问过的页面。
一、路由入门案例
创建路由基本流程:
- 页面组件准备
- App主体页 :
- 定义 路由链接
<router-link to="/">
- 定义 路由显示位置
<router-view name="homeView">
- 定义 路由链接
- js配置路由:
- 导入路由
vue-router
相关依赖createRouter
和createWebHashHistory
方法 - 创建路由方法 声明路由规则
createRouter()
path:'/'
components:{ homeView:Home }
- 对外暴露
router
对象变量 给main.js
- 导入路由
main.js
中导入router配置- import 路由js
- 绑定路由对象
app.use(router)
需求分析:
1. 创建项目 导入路由依赖
npm create vite //创建项目cd 项目文件夹 //进入项目文件夹
npm install //安装项目需求依赖
npm install vue-router@4 --save //安装全局的vue-router 4版本
2. 准备页面和组件
- components/Home.vue
<script setup>
</script>
<template>
<div>
<h1>Home页面</h1>
</div>
</template>
<style scoped>
</style>
- components/List.vue
<script setup>
</script>
<template>
<div>
<h1>List页面</h1>
</div>
</template>
<style scoped>
</style>
- App.vue
<script setup>
</script>
<template>
<div>
<h1>App页面</h1>
<hr />
<!-- 路由的连接 -->
<router-link to="/">home页</router-link>
<br />
<router-link to="/list">list页</router-link>
<br />
<!-- 路由连接对应视图的展示位置 -->
<hr />默认展示位置:
<router-view></router-view>
<hr />Home视图展示:
<router-view name="homeView"></router-view>
<hr />List视图展示:
<router-view name="listView"></router-view>
<hr />
</div>
</template>
<style scoped>
</style>
3. 准备路由配置
createWebHashHistory()
是 Vue.js 基于 hash 模式创建路由的工厂函数。- 在使用这种模式下,路由信息保存在 URL 的
hash
中,- 使用
createWebHashHistory()
方法,可以创建一个路由历史记录对象,用于管理应用程序的路由。- 在 Vue.js 应用中:
- 通常使用该方法来创建路由的历史记录对象。
- 就是路由中缓存历史记录的对象,vue-router
提供
- src/routers/router.js
// 导入路由创建的相关方法
import {
createRouter, createWebHashHistory } from 'vue-router'
// 导入vue组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'
// 创建路由对象,声明路由规则
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
components: {
default: Home,
homeView: Home
}
},
{
path: '/list',
components: {
listView: List