路由就是根据不同的 URL 地址展示不同的内容或页面。
页面切换
创建路由基本流程:
vue-router
相关依赖 createRouter
和 createWebHashHistory
方法createRouter()
path:'/'
components:{ homeView:Home }
router
对象变量 给main.js
main.js
中导入router配置
app.use(router)
npm create vite //创建项目cd 项目文件夹 //进入项目文件夹
npm install //安装项目需求依赖
npm install vue-router@4 --save //安装全局的vue-router 4版本
<script setup>
script>
<template>
<div>
<h1>Home页面h1>
div>
template>
<style scoped>
style>
<script setup>
script>
<template>
<div>
<h1>List页面h1>
div>
template>
<style scoped>
style>
<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>
createWebHashHistory()
是 Vue.js 基于 hash 模式创建路由的工厂函数。- 在使用这种模式下,路由信息保存在 URL 的
hash
中,- 使用
createWebHashHistory()
方法,可以创建一个路由历史记录对象,用于管理应用程序的路由。- 在 Vue.js 应用中:
- 通常使用该方法来创建路由的历史记录对象。
- 就是路由中缓存历史记录的对象,vue-router
提供
// 导入路由创建的相关方法
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
}
}
]
})
// 对外暴露路由对象
export default router;
component
指定组件在默认的路由视图位置展示
components:Home
components
指定组件在name为某个值的路由视图位置展示
components:{
default:Home,// 默认路由视图位置
homeView:Home// name为homeView的路由视图位置
}
import { createApp } from 'vue'
import App from './App.vue'
//导入router模块
import router from './routers/router.js'
let app = createApp(App);
//绑定路由对象!!!
app.use(router);
app.mount('#app')
重定向的作用:将一个路由重定向到另一个路由上
/showAll
redirect: '/list'
// 导入路由创建的相关方法
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入vue组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'
import Add from '../components/Add.vue'
import Update from '../components/Update.vue'
// 创建路由对象,声明路由规则
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
components: {
default: Home,
homeView: Home
}
},
{
path: '/list',
components: {
listView: List
}
},
{
path: '/showAll',
// 重定向
redirect: '/list'
},
{
path: '/add',
components: {
addView: Add
}
},
{
path: '/update',
components: {
updateView: Update
}
}
]
})
// 对外暴露路由对象
export default router;
<script setup>
script>
<template>
<div>
<h1>App页面h1>
<hr />
<router-link to="/">home页router-link>
<br />
<router-link to="/list">list页router-link>
<br />
<router-link to="/showAll">showAll页 重定向到listrouter-link>
<br />
<router-link to="/add">add页router-link>
<br />
<router-link to="/update">update页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 />Add视图展示:
<router-view name="addView">router-view>
<hr />Update视图展示:
<router-view name="updateView">router-view>
<hr />
div>
template>
<style scoped>
style>
普通路由
list页
/list
对象组件(声明式路由)编程式路由
useRouter
,动态决定向那个组件切换的路由Vue 3
和 Vue Router 4
中,你可以使用 useRouter
来实现动态路由(编程式路由)useRouter
方法返回的是一个 router 对象,你可以用它来做如导航到新页面、返回上一页面等操作。案例需求:
通过普通按钮配合事件绑定实现路由页面跳转,不直接使用router-link
标签
<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
//创建动态路由对象
let router = useRouter();
let routePath = ref("");
let showList = () => {
// 编程式路由
// 直接push一个路径
//router.push('/list')
// push一个带有path属性的对象
router.push({ path: "/list" });
};
script>
<template>
<div>
<h1>App页面h1>
<hr />
<router-link to="/">home页router-link>
<br />
<router-link to="/list">list页router-link>
<br />
<router-link to="/showAll">showAll页 重定向到listrouter-link>
<br />
<router-link to="/add">add页router-link>
<br />
<router-link to="/update">update页router-link>
<br />
<button @click="showList()">showListbutton>
<br />
<hr />默认展示位置:
<router-view>router-view>
<hr />Home视图展示:
<router-view name="homeView">router-view>
<hr />List视图展示:
<router-view name="listView">router-view>
<hr />Add视图展示:
<router-view name="addView">router-view>
<hr />Update视图展示:
<router-view name="updateView">router-view>
<hr />
div>
template>
<style scoped>
style>
路径参数
/showDetail/1
,1
就是要查看详情的id,可以动态添值!键值对参数
类似与get请求通过url传参,数据是键值对形式的
/showDetail?hid=1
,hid=1
就是要传递的键值对参数在 Vue 3 和 Vue Router 4 中,你可以使用 useRoute
这个函数从 Vue 的组合式 API 中获取路由对象。
useRoute
方法返回的是当前的 route 对象,你可以用它来获取关于当前路由的信息,如当前的路径、查询参数等。
案例需求 :
切换到ShowDetail.vue组件时,向该组件通过路由传递参数
<script setup>
import { useRouter } from "vue-router";
//创建动态路由对象
let router = useRouter();
//动态路由路径传参方法
let showDetail = (id, language) => {
// 尝试使用拼接字符串方式传递路径参数
//router.push(`showDetail/${id}/${languange}`)
/*路径参数,需要使用params */
router.push({ name: "showDetail", params: { id: id, language: language } });
};
let showDetail2 = (id, language) => {
/*uri键值对参数,需要使用query */
router.push({ path: "/showDetail2", query: { id: id, language: language } });
};
script>
<template>
<div>
<h1>App页面h1>
<hr />
<router-link to="/showDetail/1/JAVA">showDetail路径传参显示JAVArouter-link>
<button @click="showDetail(1,'JAVA')">showDetail动态路由路径传参显示JAVAbutton>
<hr />
<router-link
v-bind:to="{path:'/showDetail2',query:{id:1,language:'Java'}}"
>showDetail2键值对传参显示JAVArouter-link>
<button @click="showDetail2(1,'JAVA')">showDetail2动态路由键值对传参显示JAVAbutton>
<hr />showDetail视图展示:
<router-view name="showDetailView">router-view>
<hr />showDetail2视图展示:
<router-view name="showDetailView2">router-view>
div>
template>
<style scoped>
style>
// 导入路由创建的相关方法
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入vue组件
import ShowDetail from '../components/ShowDetail.vue'
import ShowDetail2 from '../components/ShowDetail2.vue'
// 创建路由对象,声明路由规则
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
/* 此处:id :language作为路径的占位符 */
path: '/showDetail/:id/:language',
/* 动态路由传参时,根据该名字找到该路由 */
name: 'showDetail',
components: {
showDetailView: ShowDetail
}
},
{
path: '/showDetail2',
components: {
showDetailView2: ShowDetail2
}
},
]
})
// 对外暴露路由对象
export default router;
<script setup>
import { useRoute } from "vue-router";
import { ref, onUpdated } from "vue";
// 获取当前的route对象
let route = useRoute();
let languageId = ref(0);
let languageName = ref("");
// 借助更新时生命周期,将数据更新进入响应式对象
onUpdated(() => {
// 获取对象中的参数
languageId.value = route.params.id;
languageName.value = route.params.language;
console.log(languageId.value);
console.log(languageName.value);
});
script>
<template>
<div>
<h1>ShowDetail页面h1>
<h3>编号{{route.params.id}}:{{route.params.language}}是世界上最好的语言h3>
<h3>编号{{languageId}}:{{languageName}}是世界上最好的语言h3>
div>
template>
<style scoped>
style>
<script setup type="module">
import { useRoute } from "vue-router";
import { onUpdated, ref } from "vue";
// 获取当前的route对象
let route = useRoute();
let languageId = ref(0);
let languageName = ref("");
// 借助更新时生命周期,将数据更新进入响应式对象
onUpdated(() => {
// 获取对象中的参数(通过query获取参数,此时参数是key-value形式的)
console.log(route.query);
console.log(languageId.value);
console.log(languageName.value);
languageId.value = route.query.id;
languageName.value = route.query.language;
});
script>
<template>
<div>
<h1>ShowDetail2页面h1>
<h3>编号{{route.query.id}}:{{route.query.language}}是世界上最好的语言h3>
<h3>编号{{languageId}}:{{languageName}}是世界上最好的语言h3>
div>
template>
<style scoped>
style>
useRoute
函数用来接收参数
route.param
表示路径参数
route.query
表示键值对参数
- 路由守卫是用于在路由切换期间进行一些特定任务的回调函数。
- 路由守卫可以用于许多任务,例如验证用户是否已登录、在路由切换前提供确认提示、请求数据等。
…