小白学习Vue(13)--vue-route的使用

最新推荐文章于 2025-06-12 16:08:43 发布

原创最新推荐文章于 2025-06-12 16:08:43 发布 · 668 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #java #js #router #vue-router

Vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用 Vue Router 实现单页面应用的路由管理。通过实际案例演示了从安装配置到具体使用的全过程，包括如何设置路由规则、使用路由链接组件以及在不同组件间传递数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

- - - 13. vue-router的使用：

13. vue-router的使用：

传统的页面应用，是用一些超链接来实现页面的切换和跳转。
在vue-router单页面应用中，则是通过路径之间的切换，也就是组件的切换

路由模块的本质就是建立起url和页面之间的映射关系。

13.1. 关键步骤：

下载：npm i vue-router -S
引入：import VueRouter from 'vue-router'
安装：Vue.use(VueRouter);

配置规则及创建实例：const router = new VueRouter({routes})
Vue实例传入router对象：new Vue({router,... ...})
代码中使用<router-view></router-view>占位置

13.2. 举个栗子：

管理系统有横向菜单，每个菜单包含各自的内容，每个内容包含有侧边菜单和主体内容,点击侧边菜单显示具体主体内容

在这里插入图片描述

对于单页面应用，要有模块化思想，即上述最外层组件App.vue管理着header.vue组件，而header组件管理Side.vue组件

在这里插入图片描述

汇总和管理，使用同一个侧边菜单组件，传入不同的数据展示不同的内容
通过路由router来实现横向菜单的切换，即点击横向菜单，各自管理的模块就会切换，并不会整个页面刷新

13.3. 代码实现：

【App.vue】:

<template>
  <div id="app">
    <HeaderPage msg="XXX System"/>
    <router-view/>
  </div>
</template>

<script>
import HeaderPage from './components/Header.vue'

export default {
  name: 'App',
  components: {
    HeaderPage
  }
}
</script>

【Header.vue】:

使用<router-link :to="{path:'/summarization'}">来实现模块的切换，点击会展示对应path的组件内容

<template>
  <div class="hello">
    <ul>
        <img alt="Vue logo" src="../assets/logo.png" height="15" >&emsp;{{msg}}&emsp;
      <router-link :to="{path:'/summarization'}">汇总</router-link>&emsp;
      <router-link :to="{path:'/management'}">管理</router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HeaderPage',
  props: {
    msg: String
  }
}
</script>

【index.js】:

这里对路由进行类似封装了一下，主要是方便管理路由地址数据

import Vue from 'vue'
import VueRouter from 'vue-router';
import Summarization from "@/components/Summarization";
import Management from "@/components/Management";

Vue.use(VueRouter);	// 安装路由

const routes = [    // 路由数据
    {
        path:'/summarization',
        component:Summarization
    },
    {
        path:'/management',
        component:Management
    },
]

const router = new VueRouter({
        mode:'history',
        routes
    }
);

export default router;

【Summarization.vue】:

<template>
  <div id="Summarization">
    <side :bind-datas="bindDatas"></side>
  </div>
</template>

<script>
import Side from "@/components/Side";

export default {
  name: "Summarization",
  components: {Side},
  data:function(){
    return {
      bindDatas: ['Summarization-SideOne','Summarization-SideTwo']
    }
  }
}
</script>

【Management.vue】:

<template>
  <div id="Management">
    <side :bind-datas="bindDatas"></side>
  </div>
</template>

<script>
import Side from "@/components/Side";

export default {
  name: "Management",
  components: {Side},
  data:function(){
    return {
      bindDatas: ['Management-SideOne','Management-SideTwo']
    }
  }
}
</script>

【main.js】:

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";

Vue.config.productionTip = false

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