Vue3的router和Vuex的学习条记整理

张国伟 · 2024-11-5 06:37:35

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

一、路由的基本搭建

1、安装

npm install vue-router --registry=https://registry.npmmirror.com

复制代码

2、配置路由模块

第一步：src/router/index.js创建文件
第二步：在src/view下面创建两个vue文件，一个叫Home.vue和About.vue
第三步：配置src/router/index.js文件

import Home from '../view/Home.vue'
import About from '../view/About.vue'
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}å
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default routes

复制代码

3、main引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).mount('#app')

复制代码

4、使用路由

在App.vue文件中使用

<template>
<div>
<router-view></router-view>
</div>
</template>

复制代码

5、页面按钮切换路由（一级路由）

路由组件<router-link to="/"></router-link>

<template>
<div>
<router-link to="/">首页</router-link>|
<router-link to="/about">about</router-link>
<router-view></router-view>
</div>
</template>
<script setup>
</script>
<style scoped>
</style>

复制代码

6、页面按钮切换路由（二级路由）

第一步：新建两个页面，一个Foo.vue和Bar.vue；
第二步：src/router/index.js文件里引入且配置

import Home from '../view/Home.vue'
import About from '../view/About.vue'
import Bar from '../view/Bar.vue'
import Foo from '../view/Foo.vue'
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About,
children: [
{
path: 'foo',
component: Foo,
},
{
path: 'bar',
component: Bar,
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router

复制代码

第三步：在About.vue文件中配置二级路由和跳转

<template>
<div>
AboutViewı
<div>
<router-link to="/about/foo">foo</router-link>|
<router-link to="/about/bar">bar</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'AboutView'
}
</script>
<style scoped>
</style>

复制代码

二、动态路由模式

1、第一步：将foo的path改成/:id

2、第二步：修改about.vue跳转路由

3、第三步：可以在foo.vue文件内拿到动态路由通报过来的值

$route.params.id

复制代码

三、编程路由模式

1、路由跳转代码：this.$router.push('地址')

四、定名路由

注意：除了path外，还可以为任何路由提供name
优点
1、没有硬编码的URL
2、params的自动编码/解码
3、防止在url中出现打字错误
1、在router.js中给路由添加name属性

2、将router-link的to写成动态传值模式

五、定名视图

有时候想同时（同级）展示多个视图，而不是嵌套展示

六、路由原信息

注意：有时，可能希望将任何信息附加到路由上，如过度名称、谁可以访问路由等。这些事变可以通过担当属性对象的meta属性来实现。

怎样拿到meta内的值？

七、路由传参

1、query方式（显示）

一、通过连接方式通报

结果：

二、通过name方式通报

2、params方式（显示）动态路由

3、params方式（隐式）

注意：点击刷新时，通报数据会消散

八、route对象和router对象

1、 route对象

注意：route是进行获取操纵，对当前路由进行操纵
2、router对象

注意：route是进行设置操纵，对所有路由进行方法的聚集

九、路由守卫

注意：提供的导航守卫重要用来通过跳转或取消的方式守卫导航，守卫重要有全局的，单个路由独享的，大概组件级的。
to：跳转到哪一个url
form：从哪一个url来的
next：决定进入到文件内，还是跳转到其他组件
1、全局路由守卫