vue中Router的使用方法

最新推荐文章于 2025-06-04 14:14:49 发布

夕心o

最新推荐文章于 2025-06-04 14:14:49 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_38779317/article/details/124222929

vue 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何在Vue应用中安装和配置Vue Router，包括引入、全局注册、路由定义以及在main.js中的应用。重点讲解了子路由、重定向、路由链接和视图组件的使用。适合初学者快速上手Vue路由。

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

1.安装路由Router安装依赖。
	npm install vue-router
2.在index.js中引入Router文件
	import Router from 'vue-router'
3.全局注册路由
	Vue.use(Router)
4.在router文件夹 index.js 中使用Router路由
	import Vue from 'vue'
	import Router from 'vue-router'
	Vue.use(Router)

	export default  new Router({
		routes:[{
			 path:' 地址'，
			name: ' 名字 ',
			component: () => import('组件地址')
		}, {
			path:' 地址'，
			name: ' 名字 ',
			component:组件名
		},{
			path:' 地址'，
			name: ' 名字 ',
			component:组件名
		}]
	})
5.在main.js文件中注入路由
	import router from './router'

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

1. children:[]可以设置子路由；redirect可以设置默认组件。
2. <router-link to='跳转地址' tag='改变标签'></router-link> 默认是a标签
3. <router-view></router-view>------路由出口，路由匹配到的组件将渲染这里。