vue-router的简单使用_使用usevmoder要npm下载吗-CSDN博客

本文链接：https://blog.csdn.net/s_9527_s/article/details/123382489

本文介绍了如何在Vue项目中使用vue-router，包括通过npm安装指定版本的vue-router，创建路由配置文件router.js，以及在main.js和组件中引入并使用路由。在遇到版本问题时，通过降级到vue-router@3.0并重启编辑器解决了问题。

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

一、下载

1.npm下载引入vue-router (npm install vue-router@3)

下载后可以去package.json文件中看一下vue-router的版本

2.当时我在版本这里有遇到一个问题：当时版本是4.0以上且报错obj 问题

我当时的解决办法是降低版本为3.0版本的，然后重新运行项目，当时降低版本后问题依然没解决，直到重启编辑器，并重新运行项目就莫名解决了（大神知道原因的话欢迎指导）

二、创建路由

1下载完成后创建一个js文件作为配置路由的文件（我的是router.js），下面是我的项目结构和router.js代码

import Vue from "vue";
import VueRouter from "vue-router";
import home from "./showview/home.vue";
import about from "./showview/about.vue";
Vue.use(VueRouter);	
//创建路由 path 指路径，component 指的是组件。
const routes = [
  { path: '/home', component: home },
  { path: '/about', component: about }
]
var router =  new VueRouter({
	mode: 'history',//就会使用默认的 hash 模式以#开头，设置history没#
  routes // routes: routes 的简写
})
export default router

三、路由的使用

1在main.js中引入router.js文件使用

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

2在自己的页面中使用

我的是app.vue中用的，注意：to后面的路径和path的区别

到这里就可以在页面上查看效果了

<router-link to="about">文件1</router-link>
<router-link to="home">文件3</router-link>
<!-- router路由展示 -->
<router-view></router-view>

介绍的不好的地方还请多多包涵，（也欢迎大神的指导）