Vue Router 使用步骤

最新推荐文章于 2025-08-11 09:27:36 发布

原创最新推荐文章于 2025-08-11 09:27:36 发布 · 339 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

本文详细介绍VueRouter的安装、配置及基本使用流程。从下载安装到路由组件的设置，再到页面间的导航与展示，一步步引导读者掌握Vue应用的路由管理。

Vue Router 简单配置和使用步骤：

step1: 下载 router

npm install vue-router
或
cnpm i g-router --save

step2: 引入和安装

// 在 main.js 中全局引入 router 
import VueRouter from 'vue-router'

//安装路由功能
Vue.user(VueRouter)

step3: 引入路由组件

import Home from './page/Home'
import Classify from './page/Classify'

step4: 设置路由

new Vue({
	router: new VueRouter({       //创建路由实例
		routes[					  	
			{path:'/', component: Home}    //设置路由映射路径和组件名
			{path:'/classify', component: Classify}
		]
	})
}).$mount('#app')

step5: 组件中使用路由

<divv id='app'>
    
    <!-- router-link 组件来导航， "to" 设置路径，会被渲染成 "<a>" 标签形式-->
    <router-link to='/'>首页</router-link>   
    <router-link to='/classify'>分类</router-link>
    
    <!-- router-view 设置路由出口，渲染匹配到的组件-->
    <router-view></router-view>  
</div>