Vue3路由基础

为什么要有路由

我们来看一个网易云的页面网易云音乐

在这里有两个关键，一个是切换页面的按钮，还有一个是网页的地址 

当我们在发现音乐和我的音乐和关注，之间互相切换的时候，观察网页地址的变化

 当我们点击按钮改变页面的时候，并不会直接换一个HTML页面，而是在HTML页面中更换组件，下面的页面内容都对应一个Vue组件,每次切换都会更换Vue组件

那为什么不直接用v-if呢

• URL 不变，用户无法分享链接

• 浏览器后退/前进按钮失效

• 代码难维护和扩展

 使用路由

 使用路由，我们需要先安装路由包

npm install vue-router

基本使用

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

export default createRouter({
  history: createWebHistory(),
  routes
})

推荐在router文件夹下创建index.js将路由配置加到这里的js代码中 

//main.js
import { createApp } from 'vue'
import{ createPinia } from 'pinia'
import Antd from 'ant-design-vue'
import App from './App.vue'
import router from '@/router/index.js'
let pinia = createPinia()
let app=createApp(App)
app.use(pinia).use(Antd).use(router)
app.mount('#app')

 我们需要将配置的路由use到App中

//App.vue
<template>
  <div>
    <router-view />
  </div>
</template>
<script>
</script>
<style scoped>

</style>

我们需要在App中显示路由，需要 router-view

 两个组件

//Home.vue
<template>
<div>
    This is the Home page.
</div>
</template>
<script setup>
</script>
<style scoped>
</style>

 另一个

//About.vue
<template>
    <div>
        This is the About page.
    </div>
</template>

<script setup>

</script>

<style scoped></style>

显示效果

另一个

当我们更改网页地址之后，会改变App内 router-view显示的组件

<router-link>

router-link用于切换导航地址，使我们可以不用在导航栏中输入地址切换路由，直接点击按钮切换

演示代码

// router/index.js

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Friend from '@/views/Friend.vue'
import Bamboo from '@/views/Bamboo.vue'
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { path: '/friend', component: Friend },
  { path: '/bamboo', component: Bamboo },
]

export default createRouter({
  history: createWebHistory(),
  routes
})

 //App.vue

//App.vue
<template>
  <div>
    <a-space wrap>
      <router-link to="/home">
        <a-button type="primary">Home</a-button>
      </router-link>
      <router-link to="/about">
        <a-button type="primary">About</a-button>
      </router-link>
      <router-link to="/friend">
        <a-button type="primary">Friend</a-button>
      </router-link>
      <router-link to="/bamboo">
        <a-button type="primary">Bamboo</a-button>
      </router-link>
    </a-space>

    <router-view />
  </div>
</template>
<script>
</script>
<style scoped></style>

演示网页

每点击一个按钮，都会切换到router-link的to对应的网页地址中，router-view会改变显示组件 

路由传参

查询传参

特点:

1. 参数不写在路径中，而是附加在 URL 的末尾

2. 参数类型始终是字符串

• 所有传递的值都会被转为字符串，哪怕你传的是数字或布尔类型。

3. 查询传参分为单个传参和对象传参

代码示例

App.vue

//App.vue
<template>
  <div>
    <a-space wrap>
      <router-link to="/home?id=10086">
        <a-button type="primary">Home</a-button>
      </router-link>
      <router-link :to="{path: '/about',query: { id: 10086, name: 'vue3' }}">
        <a-button type="primary">About</a-button>
      </router-link>
      <router-link to="/friend">
        <a-button type="primary">Friend</a-button>
      </router-link>
      <router-link to="/bamboo">
        <a-button type="primary">Bamboo</a-button>
      </router-link>
    </a-space>

    <router-view />
  </div>
</template>
<script>
</script>
<style scoped></style>

About.vue

//About.vue
<template>
    <div>
        This is the About page.
    </div>
    <div>
        <p>Route Query Parameters:</p>
        <ul>
            <li v-for="(value, key) in route.query" :key="key">
                {{ key }}: {{ value }}
            </li>
        </ul>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
let route = useRoute();
</script>

<style scoped></style>

Home.vue

//Home.vue
<template>
    <div>
        This is the Home page.
    </div>
    <div>
        <p>Route Query Parameters:</p>
        <ul>
            <li v-for="(value, key) in route.query" :key="key">
                {{ key }}: {{ value }}
            </li>
        </ul>
    </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
let route = useRoute();
</script>
<style scoped></style>

演示结果

 动态传参

 路由定义

动态路由传参需要用name来定位，path用来定义参数

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Friend from '@/views/Friend.vue'
import Bamboo from '@/views/Bamboo.vue'
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { name: 'friend', path: '/friend/:fidone/:fidtwo', component: Friend },
  { path: '/bamboo/:fid', component: Bamboo },
]

export default createRouter({
  history: createWebHistory(),
  routes
})

 传值

      <router-link :to="{
        name: 'friend',
        params:{
          fidone: 10001,
          fidtwo: 10002
        }
      }">
        <a-button type="primary">Friend</a-button>
      </router-link>
      <router-link to="/bamboo/110088">
        <a-button type="primary">Bamboo</a-button>
      </router-link>

演示结果

查询传参和动态传参的区别 

 基本语法区别

配置要求对比

更多配置

重定向redirect

当我们打开网页时，显示

这里的路由显示是一篇空白

我们可以使用redirect，当打开网页直接让路由出口显示

演示代码

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { name: 'friend', path: '/friend/:fidone/:fidtwo', component: Friend },
  { path: '/bamboo/:fid', component: Bamboo },
  { path: '/', redirect:'/about' }
]

当我将导航栏清空后

 404

当路由找不到位置时给个提示页面

语法:代码演示

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { name: 'friend', path: '/friend/:fidone/:fidtwo', component: Friend },
  { path: '/bamboo/:fid', component: Bamboo },
  { path: '/', redirect:'/about' },
  { path:'/:pathMatch(.*)*', component:Error}
]

//Error.vue
<template>
<h1>
    This is the Error page.
</h1>
</template>

<script setup>
        
</script>

<style scoped>

</style>

演示结果