vue3移动端项目搭建,vue3+vant+vite+axios+pinia+sass完整版代码下载:
https://download.csdn.net/download/randy521520/88820174
vue3移动端项目构建TS,vue3+vant+vite+axios+pinia+sass+typescript完整版代码下载:
https://download.csdn.net/download/randy521520/88820178
vue3 PC端项目构建,vue3+antd+vite+pinia+axios+sass完整版代码下载:
https://download.csdn.net/download/randy521520/88820523
vue3 PC端项目构建TS,vue3+antd+vite+axios+pinia+sass+typescript完整版代码下载:
https://download.csdn.net/download/randy521520/88845681
一、简介
Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用程序(SPA)。它允许你在 Vue 应用中实现客户端端的路由功能,通过管理应用的不同视图之间的导航和状态。
以下是 Vue Router 的一些主要特点和功能:
1.声明式路由配置:Vue Router 允许你使用声明式的方式定义应用的路由规则,将路径映射到组件。
2.嵌套路由:你可以定义嵌套路由,使得不同级别的路由可以对应不同的组件,从而构建复杂的页面结构。
3.路由参数:你可以在路由中定义参数,使得不同的路由可以接收不同的参数值,从而实现动态路由。
4.编程式导航:除了声明式的路由跳转方式外,Vue Router 还提供了编程式导航的方式,可以通过 JavaScript 代码来实现页面的跳转。
5.导航守卫:Vue Router 提供了导航守卫,允许你在路由导航过程中进行一些控制和操作,比如在路由跳转前进行拦截、在路由跳转后进行处理等。
6.路由懒加载:Vue Router 支持路由懒加载,可以按需加载路由对应的组件,提高应用的性能表现。
7.路由过渡效果:Vue Router 可以与 Vue 的过渡系统结合使用,实现页面切换时的过渡效果
二、配置路由
1.router.js
import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
const routes = [
{
path: '/',
redirect: '/home',
}, {
path: '/home',
component: Home
}
]
const router = createRouter({
history: createWebHistory(),
routes
});
export default router
2.main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "@/router.js";
const app = createApp(App);
app.use(router);
app.mount("#app");
三、路由相关Api
1.createRouter(options):创建 Vue Router 实例的函数。返回Router对象
- end:路由匹配是否以路径的结尾为准。
- history:指定路由使用的历史管理模式,可以是 createWebHistory 或 createWebHashHistory。
- linkActiveClass:激活链接时附加到元素的类名,默认router-link-active。
- linkExactActiveClass:严格匹配激活链接时附加到元素的类名,默认router-link-exact-active
- parseQuery:用于解析查询参数的函数,(search)=>{}
- routes:定义应用程序的路由规则,[{options}]
alias:路由的别名,在导航时可以使用别名代替路径。
beforeEnter:路由独享的守卫,用于在路由进入之前执行逻辑。
children:嵌套路由的配置,用于定义子路由。
component:路由对应的组件,用于渲染该路由。
components:命名视图组件对象,用于定义多个命名视图。
end:路由匹配是否以路径的结尾为准。
meta:路由元信息对象,用于存储路由的元数据。
name:路由的名称,用于在编程式导航中标识路由。
path:路由的路径。
props:确定是否将路由参数作为 props 传递给组件。
redirect:重定向路由配置,用于将一个路径重定向到另一个路径。
sensitive:路由是否大小写敏感。
strict:路由是否严格匹配最后的斜杠。
- scrollBehavior:控制路由切换时页面滚动的行为,(to, from, savedPosition) {}
/**********要导航到的路由地址*********/
to :{
fullPath:完整路径,包括查询参数和 hash。
hash:当前路由的 hash 值。
matched:包含当前路由的所有嵌套路径片段的路由记录数组。
meta:路由元信息对象,用于存储路由的元数据。
name:路由的名称。
params:包含动态片段和全匹配片段的键值对对象。
path:当前路由的路径。
query:包含查询参数的键值对对象。
redirectedFrom:重定向来源路由的完整路径。
}
/**********要离开的路由地址*********/
from :{
fullPath:完整路径,包括查询参数和 hash。
hash:当前路由的 hash 值。
matched:包含当前路由的所有嵌套路径片段的路由记录数组。
meta:路由元信息对象,用于存储路由的元数据。
name:路由的名称。
params:包含动态片段和全匹配片段的键值对对象。
path:当前路由的路径。
query:包含查询参数的键值对对象。
redirectedFrom:重定向来源路由的完整路径。
}
savedPositiono:要保存的页面位置,如果不存在则是 null
- sensitive:路由是否大小写敏感。
- strict:路由是否严格匹配最后的斜杠。
- stringifyQuery:用于序列化查询参数的函数,(query)=>{}
2.createWebHashHistory(base):创建hash 模式的路由历史记录对象,返回RouterHistory对象
3.createWebHistory(base):创建 history 模式的路由历史记录对象,返回RouterHistory对象 - base:base表示应用的基础 URL。base 参数会被添加到所有的路由路径之前,用于指定路由的基础路径。
4.createMemoryHistory(base):创建基于内存的路由历史记录对象的函数,通常用于测试或在不需要浏览器历史记录的情况下使用,返回RouterHistory对象 - base:base表示应用的基础 URL。base 参数会被添加到所有的路由路径之前,用于指定路由的基础路径。
5.isNavigationFailure(error,type):用于检查路由导航是否失败的辅助函数,一般用于路由守卫中 - error:NavigationFailure对象
- type:错误类型
NavigationFailureType.duplicated:表示导航重复
NavigationFailureType.canceled:表示导航被取消
NavigationFailureType.aborted:表示导航被中止
6.loadRouteLocation(route):用于加载路由位置的函数,可以用于手动加载指定的路由位置。
- fullPath:完整路径,包括查询参数和 hash。
- hash:当前路由的 hash 值。
- matched:包含当前路由的所有嵌套路径片段的路由记录数组。
- meta:路由元信息对象,用于存储路由的元数据。
- name:路由的名称。
- params:包含动态片段和全匹配片段的键值对对象。
- path:当前路由的路径。
- query:包含查询参数的键值对对象。
- redirectedFrom:重定向来源路由的完整路径。
7.onBeforeRouteLeave():组件内部的路由守卫路由即将离开
8.onBeforeRouteUpdate():组件内部的路由守卫路由即将更新
9.useLink(props):用于生成 组件。
10.useRouter() :用于访问路由实例。
11.useRoute(): 用于访问当前路由信息。
四、Router对象
1.Router.currentRoute:当前路由信息
2.Router.listening:允许关闭历史事件的监听器
3.Router.options:创建路由器时的原始选项对象
4.Router.addRoute(parentName, route):添加一个新的路由记录,将其作为一个已有路由的子路由
- parentName:应该被加入到的父级路由记录
- route:要加入的路由记录
5.Router.getRoutes():获得所有路由记录的完整列表。
6.Router.hasRoute(name):检查一个给定名称的路由是否存在
7.Router.removeRoute(name):根据其名称移除一个现有的路由
8.Router.resolve():返回一个路由地址的规范化版本。同时包含一个包含任何现有 base 的 href 属性
9.Router.onError(()=>{}):添加一个错误处理器,它会在每次导航遇到未被捕获的错误出现时被调用。
10.Router.afterEach((to, from, next)=>{}):添加一个导航钩子,它会在每次导航之后被执行。返回一个用来移除该钩子的函数。
11.Router.beforeEach((to, from, failure)=>{}):添加一个导航钩子,它会在每次导航之前被执行。返回一个用来移除该钩子的函数。
12.Router.beforeResolve((to, from, next)=>{}):添加一个导航守卫,它会在导航将要被解析之前被执行。此时所有组件都已经获取完毕,且其它导航守卫也都已经完成调用。返回一个用来移除该守卫的函数。
13.Router.back():调用 history.back() 历史路由中后退
14.Router.forward():调用 history.forward() 在历史路由中前进
15.Router.go(delta):在历史路由中前进或后退,负值后退,正值前进
16.Router.push(to):通过将一条记录加入到历史栈中来导航到一个新的 URL - replace:替换历史记录中的条目
- force:即使位置与当前位置相同也触发导航。除非传递replace: true,否则这也会向历史记录添加新条目。
- state:使用History API保存的状态
- name:路由记录名称
- params:路由原始路由参数,动态路由需要配置
- query:路由原始查询参数,?name=‘张三’
- hash:路由哈希值
17.Router.replace(to):替换历史栈中的当前记录来导航到一个新的 URL - force:即使位置与当前位置相同也触发导航。除非传递replace: true,否则这也会向历史记录添加新条目。
- state:使用History API保存的状态
- name:路由记录名称
- params:路由原始路由参数,动态路由需要配置
- query:路由原始查询参数,?name=‘张三’
- hash:路由哈希值。
五、RouterHistory对象
1.RouterHistory.currentRoute:当前路由信息
2.RouterHistory.listening:允许关闭历史事件的监听器
3.RouterHistory.options:创建路由器时的原始选项对象
4.RouterHistory.createHref(location):生成用于链接标签的相应的 href。
5.RouterHistory.destroy():清除任何通过该历史实现附加的事件监听器
6.RouterHistory.go(delta,triggerListeners):按指定方向访问历史。前进或后退
7.RouterHistory.listen():给历史实现附加一个监听器,浏览器的前进后退按钮, 监听器就会被触发,返回用来移除该监听器的回调函数。
8.RouterHistory.push(to):导航到一个地址
9.RouterHistory.replace(to):替换历史栈中的当前记录来导航到一个新的 URL
六、动态路由配置
1.基本配置
- router.js
import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";
const routes = [
{
path: '/',
redirect: '/home',
}, {
path: '/home',
component: Home
}, {
path: '/list/:id/test/:name',
name: 'list',
component: List
},
]
const router = createRouter({
history: createWebHistory(),
routes
});
export default router
- 跳转list页面
<template>
<button @click="goRouter">跳转list</button>
</template>
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
const goRouter = ()=>{
// router.push('/list/1/test/home')
router.push({
name:'list',
params:{
id: '1',
name:'home'
}
})
}
</script>
- list页面
<template>
列表页
</template>
<script setup>
import {useRoute} from "vue-router";
const route = useRoute();
console.log(route.params)
</script>
2.正则匹配
- router.js
import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";
const routes = [
{
path: '/',
redirect: '/home',
}, {
path: '/home',
component: Home
}, {
path: '/list/:id(\\d+)',
name: 'list',
component: List,
},
]
const router = createRouter({
history: createWebHistory(),
routes
});
export default router
- 跳转list页面
<template>
<button @click="goRouter">跳转list</button>
</template>
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
const goRouter = ()=>{
router.push('/list/1');
// router.push('/list/home'); //无法跳转
}
</script>
3.其他配置
const routes = [
{ path: '/:chapters+' }, //配置一个数组,匹配 /one, /one/two, /one/two/three等
{ path: '/:chapters*' },//配置一个数组,匹配 /, /one, /one/two, /one/two/three等
{ path: '/:chapters(\\d+)+' },
{ path: '/:chapters(\\d+)*' },
{ path: '/users/:userId?' }, //可选参数配置
{ path: '/users/:userId(\\d+)?' },
]
七、嵌套路由
1.基本配置
- router.js
import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";
const routes = [
{
path: '/',
redirect: '/home',
}, {
path: '/home',
component: Home
}, {
path: '/list',
children: [{
path: 'demo/:id(\\d+)',
name:'listDemo',
component: List
}]
},
]
const router = createRouter({
history: createWebHistory(),
routes
});
export default router
- 跳转listDemo页面
<template>
<button @click="goRouter">跳转list</button>
</template>
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
const goRouter = ()=>{
// router.push('/list');
router.push({
name:'listDemo',
params:{
id:1
}
});
}
</script>
2.某些场景下可能需要导航到命名路由而不导航到嵌套路由,如下配置不会跳到子路由
import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";
import Demo from "@pages/demo.vue";
const routes = [
{
path: '/',
redirect: '/home',
}, {
path: '/home',
component: Home
}, {
path: '/list',
name: 'list',
component: List,
children: [{
path: 'demo/:id(\\d+)',
name:'listDemo',
component: Demo
}]
},
]
const router = createRouter({
history: createWebHistory(),
routes
});
export default router
八、命名视图
1.router.js
import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";
import Demo from "@pages/demo.vue";
const routes = [
{
path: '/',
components: {
default:Home,
demo: List
}
},
{
path: '/demo',
components: {
default:Home,
demo: Demo
}
}
]
const router = createRouter({
history: createWebHistory(),
routes
});
export default router
2.App.vue
<template>
<h1>命名视图</h1>
<ul>
<li>
<router-link to="/">默认</router-link>
</li>
<li>
<router-link to="/demo">demo</router-link>
</li>
</ul>
<router-view></router-view>
<router-view name="demo"></router-view>
</template>
3.页面效果
九、路由传参
1.params传参,params传参需要配置动态路由,使用useRoute().params获取参数,参数会显示在href上
- router.js
import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";
const routes = [
{
path: '/',
redirect: '/home',
}, {
path: '/home',
component: Home
}, {
path: '/list/:id',
component: List
}
]
const router = createRouter({
history: createWebHistory(),
routes
});
export default router
- 跳转list页面
<template>
<button @click="goRouter">跳转list</button>
</template>
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
const goRouter = ()=>{
router.push('list/1');
}
</script>
- list页
<template>
列表页
</template>
<script setup>
import {useRoute} from "vue-router";
const route = useRoute();
console.log(route.params.id)
</script>
2.props传参,静态传参,参数不会显示在href上
- router.js
import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";
const routes = [
{
path: '/',
redirect: '/home',
}, {
path: '/home',
component: Home
}, {
path: '/list',
component: List,
props: {
title:'list页'
}
}
]
const router = createRouter({
history: createWebHistory(),
routes
});
export default router
- list页
<template>
列表页
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
title: String
});
console.log(props.title)
</script>
3.state传参,路由不需要额外增加配置,需要通过history.state获取,参数不会显示在href上
- 跳转list页
<template>
<button @click="goRouter">跳转list</button>
</template>
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
const goRouter = ()=>{
router.push({
name:'list',
state: {
from:'home页'
}
});
}
</script>
- list页面
<template>
列表页
</template>
<script setup>
console.log(history.state)
</script>
4.query传参,路由不需要额外增加配置,使用useRoute().query获取参数,参数会显示在href上
- 跳转list页
<template>
<button @click="goRouter">跳转list</button>
</template>
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
const goRouter = ()=>{
router.push({
name:'list',
query: {
from:'home页'
}
});
}
</script>
- list页面
<template>
列表页
</template>
<script setup>
import {useRoute} from "vue-router";
const route = useRoute();
console.log(route.query)
</script>
十、路由守卫
1.router.beforeEach((to, from, failure)=>{}):全局前置守卫,返回false取消当前的导航,返回路由地址重定向到一个不同的地址,如同调用 router.push()
import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";
const routes = [
{
path: '/',
redirect: '/home',
}, {
path: '/home',
component: Home
}, {
path: '/list',
name:'list',
component: List
}
]
const router = createRouter({
history: createWebHistory(),
routes
});
router.beforeEach((to, from)=>{
console.log('跳转后的路由:',to);
console.log('来源路由:',from)
})
export default router
2.router.beforeResolve((to, from)=>{}):全局解析守卫,解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用
router.beforeResolve((to, from)=>{
console.log('跳转后的路由:',to);
console.log('来源路由:',from)
})
3.router.afterEach((to, from, failure)=>{}):全局后置钩子
router.afterEach((to, from, failure) => {
console.log('跳转后的路由:',to);
console.log('来源路由:',from)
console.log('导航取消:',isNavigationFailure(failure,NavigationFailureType.cancelled))
console.log('导航终止:',isNavigationFailure(failure,NavigationFailureType.aborted))
console.log('导航重复:',isNavigationFailure(failure,NavigationFailureType.duplicated))
})
4.路由共享守卫,beforeEnter守卫只在进入路由时触发,不会在 params、query 或 hash 改变时触发,返回false阻止跳转,可设置成数组
import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";
const routes = [
{
path: '/',
redirect: '/home',
}, {
path: '/home',
component: Home
}, {
path: '/list',
name:'list',
component: List,
beforeEnter: (to, from) => {
console.log('跳转后的路由:',to);
console.log('来源路由:',from)
return false
},
}
]
const router = createRouter({
history: createWebHistory(),
routes
});
export default router
5.组件内的守卫
<template>
列表页
</template>
<script setup>
import {onBeforeRouteLeave, onBeforeRouteUpdate} from "vue-router";
onBeforeRouteLeave(()=>{
console.log('导航离开渲染该组件的对应路由时调用')
})
onBeforeRouteUpdate(()=>{
console.log('当前路由改变,但是该组件被复用时调用,如params、query改变')
})
</script>