【前端 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,你可以轻松构建出结构清晰、易于维护的单页面应用。

相关推荐
Code小翊3 分钟前
C语言bsearch的使用
java·c语言·前端
云枫晖4 分钟前
Webapck系列-初识Webpack
前端·javascript
慧一居士7 分钟前
HTML5 功能介绍,使用场景,对应功能点完整使用示例
前端
海在掘金6112715 分钟前
告别“undefined is not a function”:TS如何让你的函数调用更安心
前端
云中雾丽17 分钟前
Flutter中Stream的各种使用场景和实现方式
前端
CptW20 分钟前
第1篇(Ref):搞定 Vue3 Reactivity 响应式源码
前端·面试
葡萄城技术团队24 分钟前
基于 SpreadJS 的百万级数据在线数据透视表解决方案:技术解析与实践
前端
爱隐身的官人35 分钟前
XSS平台xssplatform搭建
前端·xss
jiangzhihao051541 分钟前
升级到webpack5
前端·javascript·vue.js
橘子海全栈攻城狮44 分钟前
【源码+文档+调试讲解】基于SpringBoot + Vue的知识产权管理系统 041
java·vue.js·人工智能·spring boot·后端·安全·spring