张国伟 发表于 2024-11-5 06:37:35

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

一、路由的基本搭建

1、安装

npm install vue-router --registry=https://registry.npmmirror.com https://i-blog.csdnimg.cn/direct/9735aae6c8bf46cfab56d82c688033e8.png

2、配置路由模块

第一步:src/router/index.js创建文件
第二步:在src/view下面创建两个vue文件,一个叫Home.vue和About.vue
第三步:配置src/router/index.js文件
https://i-blog.csdnimg.cn/direct/26161ad8bef04ed88b2e9e2096b16625.png
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引入

https://i-blog.csdnimg.cn/direct/d1a0cf7f3d4e4679a6a8e39598d69317.png
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文件中使用
https://i-blog.csdnimg.cn/direct/b12d657397e044748e61674ef4faf9d7.png
<template>
<div>
    <router-view></router-view>
</div>
</template>
5、页面按钮切换路由(一级路由)

路由组件<router-link to="/"></router-link>
https://i-blog.csdnimg.cn/direct/dae84be1c3c24783a5846c1f9df81a03.png
<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文件里引入且配置
https://i-blog.csdnimg.cn/direct/697436df9fb6435892c8d38588b814da.png
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文件中配置二级路由和跳转
https://i-blog.csdnimg.cn/direct/ce96f3818f5c4e2388a2e7f166faf4e2.png
<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

https://i-blog.csdnimg.cn/direct/a9d290fbe732464985a9ccbbb7871440.png
2、第二步:修改about.vue跳转路由

https://i-blog.csdnimg.cn/direct/698e1bf2132946c5aa63c1da65d412c5.png
3、第三步:可以在foo.vue文件内拿到动态路由通报过来的值

$route.params.id
三、编程路由模式

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

https://i-blog.csdnimg.cn/direct/ef3c7007171649a1bfc45babbc9e9245.png

四、定名路由

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

https://i-blog.csdnimg.cn/direct/884d517cfa184880a5b0a82f36663e22.png
2、将router-link的to写成动态传值模式

 https://i-blog.csdnimg.cn/direct/8929a87c8e3345c3ac81fa13bf5e895e.png

五、定名视图

有时候想同时(同级)展示多个视图,而不是嵌套展示 
https://i-blog.csdnimg.cn/direct/fdeb6189b00442a69b98c15098f28437.png
六、路由原信息 

注意:有时,可能希望将任何信息附加到路由上,如过度名称、谁可以访问路由等。这些事变可以通过担当属性对象的meta属性来实现。 
https://i-blog.csdnimg.cn/direct/da807f90c77c4a568fde91f1e560886b.png
怎样拿到meta内的值?
 https://i-blog.csdnimg.cn/direct/4d0d800e16d64d40892ea74d9e8cf9c7.png

七、路由传参 

1、query方式(显示)

一、通过连接方式通报

 https://i-blog.csdnimg.cn/direct/82eba241013c420a830dd0af611c65f0.png
 https://i-blog.csdnimg.cn/direct/29f777dae17e415c84cebe1077a01d35.png
结果:https://i-blog.csdnimg.cn/direct/2f3e3e01c2af4dff8bccaf84c6b4cc55.png 

二、通过name方式通报

https://i-blog.csdnimg.cn/direct/4c1f672769584810a6d0cfe48664febe.png
2、params方式(显示)动态路由


3、params方式(隐式)

注意:点击刷新时,通报数据会消散
https://i-blog.csdnimg.cn/direct/c35f755448274592af7446ac428d8657.png
https://i-blog.csdnimg.cn/direct/be8103749d9d4567bcefc1451bc0e723.png

八、route对象和router对象

https://i-blog.csdnimg.cn/direct/d4a44b9df5574d38ae7fd40a1c046a43.png
1、 route对象

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

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

 九、路由守卫

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

https://i-blog.csdnimg.cn/direct/c156e4d2f42a4392a67f294b15662301.png
 2、单个路由独享守卫

https://i-blog.csdnimg.cn/direct/c946ac3328d44b9193dc37af802e69d0.png

3、 组件级守卫

https://i-blog.csdnimg.cn/direct/39451771f9a841808b924a625f97fe3f.png 

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: Vue3的router和Vuex的学习条记整理