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]