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，路由守卫

相关推荐
不会代码的小猴8 分钟前
C++新增关键字
开发语言·c++·笔记
xiaoxiangsiyan1 小时前
RHCE2026完整版全知识点清单
运维·网络·学习·自动化·rhce
lemon_yyds2 小时前
uVIew2 弹框滚动穿透问题-[uu-popup ]组件
vue.js
Titan20242 小时前
Linux网络基础知识
linux·服务器·网络·c++·学习
m4Rk_2 小时前
【论文阅读】Agent 记忆机制（41）：Agentic Plan Caching——将历史执行轨迹转化为可复用的计划记忆
论文阅读·人工智能·学习·开源·github
woshihuanglaoshi2 小时前
错题四科入库：鸿蒙错题本种子数据与复习队列效果
学习·华为·harmonyos·鸿蒙
hsjiasb3 小时前
FreeRTOS学习（二十九）——低功耗Tickless Idle
学习·学习笔记·freertos
小赵AI手记3 小时前
技术拆解（十七）具身智能：机器人动作生成为何走向Diffusion Policy？
人工智能·笔记·python·机器人
超爱吃香菜的菜鸟3 小时前
关于pnpm 部分使用（一）
前端·vue.js
疯狂打码的少年3 小时前
【数据结构】二叉排序树（BST）的定义与操作
数据结构·笔记·算法
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新042026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？05Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费06历年考研数学一、数学二、数学三真题试卷及答案PDF07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08VSCode+CodeX扩展，无法启动092026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片10如何新建文件夹？ 电脑新建文件夹的4种方法