vue-router-安装和配置方式-CSDN博客

本文链接：https://blog.csdn.net/Paranoid_truggle/article/details/119741246

本文介绍了如何在Vue项目中配置和使用Vue Router，包括安装、路由对象创建、组件关联以及router-link和router-view的实战应用。

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

//配置路由的相关信息
import VueRouter from "vue-router";
import Vue from "vue";
import Home from "../components/Home";
import About from "../components/About";

//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)
//2.创建路由对象
const routes =[
  {
    path:'/home',
    component:Home
  },
  {
    path:'/about',
    component: About
  },
]
const router= new VueRouter({
  //配置路由和组件之间的应用关系
  routes
})
//3.将router对象传入到Vue实例
export default router
/*
* 路由的使用过程
*   1.在router文件夹下的index文件中导入vuerouter和vue组件
*   2.定义router实例，const routes =[],[]里面定义{}传入路由的对象，path，和component
*   3.在app组件里面实现router-link 调用index里面的path路径
*   4.在app组件里面写上router-view标签实现可视化
* router-link 该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签
* router-view 该标签会根据当前的路径，动态渲染出不同的组件
* 
* */

<template>
  <div id="app">
    <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>
    <router-link to="/home" tag="button" replace >首页</router-link>
    <router-link to="/about" tag="button" replace >关于</router-link>
<!--router-view 告诉组件要渲染的位置，即跳转组件要展示的位置-->
    <div id="aaa"><router-view></router-view></div>
  </div>
<!--router-link的一些其他属性，默认渲染为a标签
        tag:tag可以指定router-link 之后渲染成什么组件，比如tag="button"渲染的是按钮组件
        replace:replace不会留下history记录，所以指定replace的情况下，后退建没办法返回上一层
        active-class:当router-link对应的路径匹配成果后，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称
-->
<!--  .router-link-active哪个组件处于活跃状态就会自动绑定该class类，可以对.router-link-active进行一些事件的绑定-->
</template>

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

<style>
#aaa {
  border: 3px solid red;
}
.active{
  color: red;
}
</style>

  name: 'App',
  methods:{
    homeClick() {
      //通过代码的方式修改路径 vue-router
      //push =>pushState
      //this.$router.push("/home")可以实现回退
      this.$router.replace('/home');//不可以实现回退
      console.log('homeclick');
    },
    aboutClick(){
      this.$router.push('/about');
      console.log('homeclick');
    }
  }
}