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

一、路由的基本搭建

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文件

javascript 复制代码
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引入

javascript 复制代码
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文件中使用

html 复制代码
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

5、页面按钮切换路由(一级路由)

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

html 复制代码
<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文件里引入且配置

javascript 复制代码
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文件中配置二级路由和跳转

javascript 复制代码
<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、全局路由守卫

2、单个路由独享守卫

3、 组件级守卫

相关推荐
hopetomorrow12 分钟前
学习路之压力测试--jmeter安装教程
学习·jmeter·压力测试
hopetomorrow13 分钟前
学习路之PHP--使用GROUP BY 发生错误 SELECT list is not in GROUP BY clause .......... 解决
开发语言·学习·php
533_34 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
/**书香门第*/41 分钟前
Cocos creator 3.8 支持的动画 7
学习·游戏·游戏引擎·游戏程序·cocos2d
美式小田1 小时前
单片机学习笔记 9. 8×8LED点阵屏
笔记·单片机·嵌入式硬件·学习
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
_不会dp不改名_1 小时前
HCIA笔记3--TCP-UDP-交换机工作原理
笔记·tcp/ip·udp
计算机毕设指导62 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
-一杯为品-2 小时前
【51单片机】程序实验5&6.独立按键-矩阵按键
c语言·笔记·学习·51单片机·硬件工程