VueRouter3学习笔记

_雪菜肉丝面_2024-06-11 15:43

文章目录

1，入门案例

安装库。

javascript 复制代码 
npm install vue-router@3

准备三个组件。

App.vue

AAA.vue

BBB.vue

html 复制代码 
<template>
  <div>
    <router-link to="/a">aaa</router-link>
    <router-link to="/b">bbb</router-link>
    <router-view />
  </div>
</template>

<template>
  <div>AAA</div>
</template>

<template>
  <div>BBB</div>
</template>

新建router.js。

js 复制代码 
import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        { path: '/a', component: AAA },
        { path: '/b', component: BBB }
    ]
})
export default router

main.js。

js 复制代码 
import router from './router.js'

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

效果：


2，一些细节

高亮效果

router-link的active-class属性，指定当前路由链接的高亮类名。

html 复制代码 
<template>
  <div>
    <router-link to="/a" active-class='abc'>aaa</router-link>
    <router-link to="/b" active-class='abc'>bbb</router-link>
    <router-view />
  </div>
</template>
<style>
.abc {
  color: red;
}
</style>

非当前路由会被销毁

html 复制代码 
<template>
  <div>AAA</div>
</template>
<script>
export default {
  beforeDestroy() {
    console.log(1);
  }
}
</script>

3，嵌套路由

AAA内还有CCC和DDD。

二级路由链接要从一级开始写，

配置项无须加斜线。

html 复制代码 
<template>
  <div>
    <router-link to="/a">aaa</router-link>
    <router-link to="/b">bbb</router-link>
    <router-view />
  </div>
</template>

<template>
  <div>
    <router-link to="/a/c">ccc</router-link>
    <router-link to="/a/d">ddd</router-link>
    <router-view />
  </div>
</template>

<template>
  <div>BBB</div>
</template>

<template>
  <div>CCC</div>
</template>

<template>
  <div>DDD</div>
</template>

router.js。

javascript 复制代码 
import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"
import CCC from './CCC.vue'
import DDD from './DDD.vue'
Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: '/a', component: AAA,
            children: [{
                path: 'c', component: CCC
            }, {
                path: 'd', component: DDD
            }]
        },
        { path: '/b', component: BBB }
    ]
})
export default router

4， 传递查询参数

发送。

html 复制代码 
<template>
  <div>
    <router-link to="/a?id=123">aaa</router-link>
    <router-link to="/a?id=124">aaa</router-link>
    <router-link to="/b">bbb</router-link>
    <router-view />
  </div>
</template>

接收。

html 复制代码 
<template>
  <div>AAA{{ $route.query.id }}</div>
</template>

发送的第二种写法。

html 复制代码 
<template>
  <div>
    <router-link :to="{
      path: '/a',
      query: {
        id: 123
      }
    }">aaa</router-link>
    <router-link to="/a?id=124">aaa</router-link>
    <router-link to="/b">bbb</router-link>
    <router-view />
  </div>
</template>

5，命名路由

给路由起个名字。

js 复制代码 
import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        { path: '/a', component: AAA, name: "a" },
        { path: '/b', component: BBB, name: "b" }
    ]
})
export default router

跳转时传递名称。

html 复制代码 
<template>
  <div>
    <router-link :to="{
      name: 'a'
    }">aaa</router-link>
    <router-link :to="{
      name: 'b'
    }">bbb</router-link>
    <router-view />
  </div>
</template>

6，传递路径参数

发送。

html 复制代码 
<template>
  <div>
    <router-link to="/a/123">aaa</router-link>
    <router-link to="/a/124">aaa</router-link>
    <router-link to="/b">bbb</router-link>
    <router-view />
  </div>
</template>

配置。

js 复制代码 
import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        { path: '/a/:id', component: AAA },
        { path: '/b', component: BBB }
    ]
})
export default router

接收。

html 复制代码 
<template>
  <div>AAA{{ $route.params.id }}</div>
</template>

7，路径参数转props

启用props，会将所有路径参数通过props传递给组件。

javascript 复制代码 
import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        { path: '/a/:id', component: AAA, props: true },
        { path: '/b', component: BBB }
    ]
})
export default router

组件要声明该props。

html 复制代码 
<template>
  <div>AAA{{ id }}</div>
</template>
<script>
export default {
  props: ['id']
}
</script>

8，查询参数转props

props写成函数。

javascript 复制代码 
import Vue from 'vue'
import VueRouter from 'vue-router'
import AAA from "./AAA.vue"
import BBB from "./BBB.vue"

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: '/a', component: AAA, props(route) {
                return {
                    id: route.query.id
                }
            }
        },
        { path: '/b', component: BBB }
    ]
})
export default router

9，replace模式

替换掉之前的路由，而不是压栈。

html 复制代码 
<template>
  <div>
    <router-link to="/a" replace>aaa</router-link>
    <router-link to="/b" replace>bbb</router-link>
    <router-view />
  </div>
</template>

10，编程式导航

代码进行跳转。

html 复制代码 
<template>
  <div>
    <div>AAA</div>
    <button @click="add">按钮</button>
  </div>
</template>
<script>
export default {
  methods: {
    add() {
      this.$router.push("/b")
    }
  },
}
</script>

参数可以是对象，与前面route-link的to用法一致。

11，缓存路由组件

不销毁。

html 复制代码 
<keep-alive>
  <router-view />
</keep-alive>

12，新生命周期

不销毁的时候，激活与失活。

html 复制代码 
<template>
  <div>
    <div>AAA</div>
  </div>
</template>
<script>
export default {
  activated() {
    console.log(1);
  },
  deactivated() {
    console.log(2);
  },
}
</script>

13，路由守卫

相关推荐
差不多的周周10 小时前
《骨架上下文：基于零镜头骨架的动作识别的骨架侧上下文提示学习》论文核心部分详解
学习
Century_Dragon11 小时前
从挂图到VR：汽修专业的一堂新能源原理课可以怎么上~
学习
知识分享小能手11 小时前
C++ 学习教程，从入门到精通，C++对象和类 — 详细知识点总结(10）
开发语言·c++·学习
今年下半年11 小时前
【VUE】整合腾讯地图、自定义区域边界、村委名称及资产统计（放大显示资产点位）
前端·javascript·vue.js
New农民工12 小时前
倒立摆训练秘籍：理解训练参数
学习
L@ncor13 小时前
第五章 基于低代码平台的智能体搭建 · 学习笔记（Coze / Dify / FastGPT / n8n）
笔记·学习·低代码·agent·prompt工程
知潮网13 小时前
被嫌弃的五仁月饼，一吨千元在养猪场翻了身
笔记
2601_9606312313 小时前
中药前处理及提取的工艺环节与技术要点
笔记
2601_9653842613 小时前
口腔黏膜清洁中的几何约束与流体动力学边界层问题分析
经验分享·笔记
迪丽热爱13 小时前
多媒体应用20-903（补）
学习
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02Telegram APK 下载安装完整指南 — 2026年最新03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF052026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07给AI一张“业务概念地图“：本体如何从哲学走向企业智能08jev-ultrafast 深度解析：7 秒订机票的浏览器 Agent 是如何炼成的09开源OV-Watch：怎么做一个智能手表10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新