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、 组件级守卫

相关推荐
鸭鸭梨吖9 分钟前
产品经理笔记
笔记·产品经理
Chef_Chen10 分钟前
从0开始学习机器学习--Day13--神经网络如何处理复杂非线性函数
神经网络·学习·机器学习
王哲晓12 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v17 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云27 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
齐 飞35 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
lulu_gh_yu1 小时前
数据结构之排序补充
c语言·开发语言·数据结构·c++·学习·算法·排序算法
丫头,冲鸭!!!1 小时前
B树(B-Tree)和B+树(B+ Tree)
笔记·算法
Re.不晚1 小时前
Java入门15——抽象类
java·开发语言·学习·算法·intellij-idea
听忆.1 小时前
手机屏幕上进行OCR识别方案
笔记