全栈开发一条龙——前端篇

第一篇：框架确定、ide设置与项目创建

第二篇：介绍项目文件意义、组件结构与导入以及setup的引入。

第三篇：setup语法，设置响应式数据。

第四篇：数据绑定、计算属性和watch监视

第五篇 : 组件间通信及知识补充

第六篇：生命周期和自定义hooks

本文将带你从头到尾将Vue3中的路由学透，学完之后所有的跳转需求都可以实现。

文章目录

路由一、路由基础实践——流程梳理1.index.ts2.三个页面组件的vue3.main.ts4.app.vue5.自定义路由名效果展示

二、路由模式1.history模式2.hash模式3.模式使用推荐

三、嵌套路由1.基本嵌套2.路由传参1.query参数a）基本写法b）对象快速写法

2.params参数1.基本写法2.快捷写法

3.路由的props配置

四、编程式导航（重要）脚本操作跳转五、补充1.replace属性2.重定向

路由

路由可以实现页面的跳转，可以用来实现SPA应用（单页面应用）

类似这种，左边导航，右边展示，全程画面不抖动，不跳转。

点击导航，路径（网址）发生变化，路由器捕获，卸载当前组件，挂载新的组件，这些组件都是一个一个Vue文件写的页面。

一、路由基础实践——流程梳理

我们先安装路由 <code>npm i vue-router,再在src下创建router文件夹。

1.index.ts

我们在router中创建index.ts,这个文件的意义在于创建一个路由器，并将之暴露出来。

import { createRouter } from "vue-router"

import home from "@/components/home.vue";

import dog from "@/components/dog.vue";

import cc from "@/components/cc.vue";

//创建路由器

const router = createRouter({

//管理路由

routes:[ //一个一个的路由规则

{

//路径

path:'/home',

//组件绑定

component:home

},

{

//路径

path:'/dog',

//组件绑定

component:dog

},

{

//路径

path:'/test',

//组件绑定

component:cc

}

]

})

export default router

请仔细查看写在代码旁的注释，这里做一个大致说明，这个地方是要进行一个路由的绑定，我们先在src/components中新建三个文件，这三个文件就是之后我们可以用来切换的页面Vue文件

然后按照如上语法绑定至此，我们的路由器就建立好了。

可能遇到的报错

如果遇到这个问题，是因为你没有设置路由模式（这个在本文后面会讲）

你要引入设置路由模式的组件

<code>//引入路由器模式

import { createWebHistory } from "vue-router";

然后在const中加入 history:createWebHistory(),

这样报错就消失了。

2.三个页面组件的vue

我们绑定完成之后，必须要在相应组件中加入内容，不然会报错。我们测试的时候可以随便写，我以下给出三个样例，你可以直接复制。

dog.vue:

<code><template>

<div class = "style_test">

<button @click="add_border_collie">添加一只边牧！</button> code>

<hr>

<img v-for="(bc,index) in border_collie" :src="bc" :key="index" class="sizee">code>

</div>

<div class = "style_test">

<button @click="add_dog">随机添加一只狗</button> code>

<hr>

<img v-for="(bc,index) in dog" :src="bc" :key="index" class="sizee">code>

</div>

</template>

<script lang="ts">code>

export default {

name : 'dog'//组件名

}

</script>

<script lang="ts" setup>code>

import { reactive, ref} from 'vue'

import axios from 'axios';

let border_collie=reactive([])

let dog=reactive([])

async function add_border_collie(){

try{

let result=await axios.get('https://dog.ceo/api/breed/collie/border/images/random')

border_collie.push(result.data.message)

} catch(error){ alert(error)}

}

async function add_dog(){

try{

let result=await axios.get('https://dog.ceo/api/breeds/image/random')

dog.push(result.data.message)

} catch(error){ alert(error)}

}

</script>

<style scoped>

.style_test{

background-color: rgb(208, 223, 40);

box-shadow: 0 0 10px;

border-radius:10px;

padding: 20px;

}

.sizee{

height: 150px;

margin-right: 10px;

}

</style>

cc.vue

<template>

<h1>TTTi9er</h1>

</template>

<script lang="ts">code>

export default {

name : 'test'//组件名

}

</script>

<style>

</style>

home.vue

<template>

<h1>Csy</h1>

</template>

<script lang="ts">code>

export default {

name : 'home'//组件名

}

</script>

<style>

</style>

3.main.ts