一个小demo带你体验vue-router的魔力

前言

下面为该demo的最终效果：

vue中所有的xxx.vue文件都是一个组件，这些组件最终会被vue读取，并编译成一段div结构，挂载在唯一的html文件中，所以想要实现组件之间的切换很简单。 但是，想要将某些组件当成页面(每个页面对应的url都是唯一的)来用，默认情况下就行不通，那么，我们就需要一个可以将代码片段的切换模拟成页面的跳转的样子的这样的一个手段，这就是vue-router。

下面来介绍小demo吧~

正文

准备

• 生成vue项目：在终端输入npm create vue@latest
• 安装包，在终端输入npm i

先介绍一下第一排的三个vue文件吧：

(快捷方式"输入vb3s按回车键，如果没用的话，应该是没安装插件，安装一个Vue VSCode Snippet插件)

• home.vue：

<template>
    <div>
       <h2>home page</h2>

       <div class="nav">
         <router-link to="/home/newest">最新</router-link>
         <router-link to="/home/suggest">推荐</router-link>
       </div>

       <router-view></router-view>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

• bot.vue：

router.push({path: '/hot', query: {id: 1, name: 'yezhi'}});：后面的query会传递到网址链接上

<template>
    <div>
      <p>BOT page</p>
      <button @click="goHot">去沸点</button>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goHot = () => {
// 跳转到沸点页面
// router.push('/hot');
router.push({path: '/hot', query: {id: 1, name: 'yezhi'}});
};
</script>

<style lang="scss" scoped>

</style>

• hot.vue：

<template>
    <div>
       hot page
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

在home.vue的页面里还有两个子文件，再新建一个home文件夹：

• newest.vue：

<template>
    <div>
       最新的数据
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

• suggest.vue：

<template>
    <div>
       推荐的文章
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

所有的vue文件已经介绍完了，现在我们来配置路由，实现跳转：

• 新建一个router文件夹，在里面新建一个index.js文件，在该文件里配置路由：

1. 定义一个routes，里面存放路由，每一个对象里有两个属性path和component，子组件通过children来存放；

import Home from '../pages/home.vue';

{
    path: '/home',
    component: Home,
    children: [
      {
        path: '/home',
        redirect:'/home/suggest'
      },
      {
        path: '/home/newest',
        component: () => import('../pages/home/newest.vue')
      },
      {
        path: '/home/suggest',
        component: () => import('../pages/home/suggest.vue')
      }
    ]
  },

还可以直接用一个函数，通过import来配置路由

 {
    path: '/hot',
    component:() => import('../pages/hot.vue')
  }

2. 如果想要一打开就是某个页面的话，通过一个对象，该对象中有两个属性path和redirect：根路径为home的界面，也就是一打开就是home

{
    path: '/',
    redirect: '/home'
}

3. 创建一个路由

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
    history: createWebHistory(),
    routes: routes
});

4. 导出为默认路由

export default router;

5. index.js总代码：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/home.vue';
import Bot from '../pages/bot.vue';
import Hot from '../pages/hot.vue';

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: '/home',
        redirect:'/home/suggest'
      },
      {
        path: '/home/newest',
        component: () => import('../pages/home/newest.vue')
      },
      {
        path: '/home/suggest',
        component: () => import('../pages/home/suggest.vue')
      }
    ]
  },
  {
    path: '/bot',
    component: Bot
  },
  {
    path: '/hot',
    component:() => import('../pages/hot.vue')
  }
];

const router = createRouter({
    history: createWebHistory(),
    routes: routes
});

export default router;

• 在main.js内引入上面的index.js文件

import router from './router/index.js'

• 在App.vue文件中放一个 <router-view>标签用于展示vue文件，用router-link来实现路由跳转

<template>
  <div>
     <nav>
      <router-link to="/home">首页</router-link>|
      <router-link to="/bot">BOT</router-link>|
      <router-link to="/hot">沸点</router-link>
     </nav>

     <!-- 页面 -->
     <router-view></router-view>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

运行

在终端输入npm run dev

结语