Vue.js路由的简单使用

关注

原创最新推荐文章于 2026-06-06 16:32:27 发布 828 阅读 AI 写同款· GEO 优化 ›

Vue.js和vue-router的使用 Vue-router是Vue.js官方提供的路由管理器，它允许我们在Vue.js应用程序中实现客户端的路由功能。我们首先安装和配置了Vue.js和vue-router，然后介绍了路由配置和导航的基础知识，包括路由参数、动态路由和嵌套路由。最后，我们创建了一个Vue实例，并将路由实例传递给它。安装完成后，我们需要在应用程序的入口文件中引入Vue.js和vue-router，并创建一个Vue实例。在上面的示例中，我们在About组件中定义了两个嵌套的路由规则，分别对应Profile和Contact页面。阅读详情

文章目录

更多关于Vue.js的系列文章请点击：Vue.js开发实践(0)-目录页

一、什么是路由

路由（Router）是Vue.js的另一个精髓所在，它是vue的一个官方库，用于匹配路径和模块的关系。

在这里插入图片描述

二、一步步使用路由

2.1、在main.js中引入Vue-Router

一般来说vue已经自带了路由了，如果没有的话，可以使用npm下载路由

npm install -g vue-router

在main.js头部引入路由和使用路由

import Router from 'vue-router
Vue.use(Router)

2.2、在index.html中使用路由导航和路由视图

路由导航由< router-link to="/url" >来完成，这相当于使用一个< a> 标签;而路由渲染由来完成，所有路由导航后的模块都会在这里显示出来。

<div id="router1">
		<h1>使用路由</h1>
		<!-- 使用路由 -->
		<div style="color: red">{{message}}</div>
		<router-link to="/news">新闻</router-link>	
		<router-link to="/home">首页</router-link><br>
		 <!-- 路由渲染 -->
		<router-view></router-view>
</div>

2.3、在main.js中配置路由路径和路由器挂载实例

以上完成后，我们需要在main.js中配置路由的路径和路由器实例的创建和挂载：

// 用以作为路由的模块组件
var news = {
	template: '<span>我是新闻页</span>'
}

var home = {
	template: '<span>我是首页</span>'
}

//路由地址映射
var routes1 = [
	{path: '/news',component: news},
	{path: '/home',component: home}
]

//路由地址注册到路由器中
var myRouter = new Router({
	routes: routes1
})
//挂载路由到id为router1的实例上
new Vue({
	router: myRouter,
	data: {
		message: 'hello vue router'
	}
}).$mount('#router1')

以上写法还可以精简为：

var news = {
	template: '<span>我是新闻页</span>'
}

var home = {
	template: '<span>我是首页</span>'
}

var router1 = new Router({
	//配置路由关系
	routes: [
	{path: '/news',component: news},
	{path: '/home',component: home}
	]
})

//挂载路由
new Vue({
	router: router1,
	data: {
		message: 'hello vue router'
	}
}).$mount('#router1')