【前端 21】Vue Router路由配置

Vue Router路由配置

在Vue.js项目中,Vue Router是官方提供的路由管理器,用于构建单页面应用(SPA)。它允许我们通过不同的URL访问不同的页面组件,而无需重新加载页面。下面,我将详细介绍如何在Vue项目中配置和使用Vue Router。

安装Vue Router

首先,确保你已经安装了Vue CLI并创建了一个Vue项目。如果项目是在创建时没有勾选路由功能,你可以通过npm手动安装Vue Router。这里以安装Vue Router 3.5.1版本为例:

bash 复制代码
npm install vue-router@3.5.1

main.js中引入并使用Vue Router

安装完Vue Router后,你需要在main.js(或项目的入口文件)中引入并使用它。同时,确保将router实例传递给Vue实例。

javascript 复制代码
import Vue from 'vue'  
import App from './App.vue'  
import router from './router' // 引入router  
  
Vue.config.productionTip = false  
  
new Vue({  
  router, // 将router实例注入到vue根实例  
  render: h => h(App)  
}).$mount('#app')

配置路由表

接下来,在src/router/index.js(或你定义的router文件)中配置路由表。路由表定义了URL路径与组件之间的映射关系。

javascript 复制代码
import Vue from 'vue'  
import Router from 'vue-router'  
import DeptView from '../views/system/DeptView.vue'  
  
Vue.use(Router)  
  
export default new Router({  
  routes: [  
    {  
      path: '/',  
      redirect: '/dept' // 访问根路径时重定向到/dept  
    },  
    {  
      path: '/dept',  
      name: 'dept',  
      component: DeptView // 当访问/dept时,加载DeptView组件  
    }  
    // 可以继续添加更多路由配置  
  ]  
})

在路由配置中,path定义了URL路径,redirect用于路径重定向,name为路由命名(方便编程式导航),component则是对应路径应该渲染的Vue组件。

App.vue中使用<router-view></router-view>

<router-view></router-view>是Vue Router的一个非常重要的组件,它用于渲染匹配的组件。在App.vue的模板中,你需要加入这个组件,以便Vue Router知道在哪里渲染对应的路由组件。

vue 复制代码
<template>  
  <div id="app">  
    <!-- 路由出口 -->  
    <router-view></router-view>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'App'  
}  
</script>  
  
<style>  
/* 你的样式 */  
</style>

使用<router-link>切换路由

最后,你可以使用<router-link>组件来创建导航链接,实现用户点击链接时切换路由。<router-link>默认会被渲染成一个<a>标签,并且可以通过to属性指定目标路由。

vue 复制代码
<template>  
  <div>  
    <!-- 使用router-link进行路由导航 -->  
    <router-link to="/">首页</router-link>  
    <router-link to="/dept">部门管理</router-link>  
  </div>  
</template>

以上就是在Vue项目中配置和使用Vue Router的基本步骤。通过Vue Router,你可以轻松构建出结构清晰、易于维护的单页面应用。

相关推荐
中微子4 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
无限远的弧光灯14 分钟前
c语言学习_函数递归
c语言·开发语言·学习
天天向上102419 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
趣多多代言人21 分钟前
从零开始手写嵌入式实时操作系统
开发语言·arm开发·单片机·嵌入式硬件·面试·职场和发展·嵌入式
胖大和尚31 分钟前
C++项目学习计划
开发语言·c++·学习
开开心心_Every33 分钟前
全能视频处理工具介绍说明
开发语言·人工智能·django·pdf·flask·c#·音视频
芬兰y35 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁42 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry42 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录43 分钟前
列表分页中的快速翻页竞态问题
前端·javascript