Vue中router的配置使用步骤

最新推荐文章于 2025-10-19 22:04:52 发布

原创最新推荐文章于 2025-10-19 22:04:52 发布 · 1.8k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#router

本文详细介绍如何在Vue项目中安装、配置并使用Vue Router进行页面跳转。从下载、配置到注册，再到具体使用方法，包括router-link标签和编程式导航，帮助读者全面掌握Vue Router的运用。

因为router是工作在Vue组件中，因此在谈到router的使用时，默认前提就是Vue已经安装配置好，在这里不再赘述。

一、下载、安装

通过如下命令下载router组件

npm install vue-router

二、配置

在src文件夹下创建router/router.js文件

1、导入Vue和router

import Vue from "vue"
import VueRouter from "vue-router"

2、将router关联给Vue

Vue.use(VueRouter);

3、新建一个router 的实例对象

let router=new VueRouter({

    routes:[
      
    ]
  }

4、设置匹配路径

let router=new VueRouter({

    routes:[
      {path:"/",redirect:"/home"},//路由重定向
      {path:"/home",component:home },
      {path:"/category",component:category },
      {path:"/cart",component:cart },
      {path:"/my",component:my },
      {name:"haha",path:"/theme/:themeId/:title",component:theme},
      {path:"/notfind",component:ErrorPage},
      {path:"**",redirect:"/notfind"}
    ]
  }

三、注册

在项目的main.js中注册这个路由router

1、在main.js中引入router

import router from "./router"

2、在项目根组件实例（即main.js中创建的Vue对象）中注册

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3、在项目的根组件App.vue中的template中配置router-view标签

<template>
  <div id="app">
    <!--开辟一片空间，存放匹配的组件-->
    <router-view></router-view>
  <!-- <router-view></router-view>-->
  </div>
</template>

四、跳转使用

可通过两种方式，来进行页面的跳转

1、通过router-link标签

<template>

    <ul id="tabBar">
      <router-link to="/home">首页 </router-link>
      <router-link to="/category">分类 </router-link>
      <router-link to="/cart">购物车 </router-link>
      <router-link to="/my">我的 </router-link>
    </ul>
</template>

2、通过编程式导航

 methods:{
      goTheme(item){
        this.$router.push({path:`/theme/${item.themeId}/${item.title}`});
      }
    }