路由其实是一种映射关系，类似于key===>value的键值对关系，其中key表示请求的路径path。 路由是根据不同的url地址展示不同的内容和页面。 路由分为前端路由和后端路由 前端路由：前端路由的value表示组件，一个path映射一个组件； 后端路由：后端路由的value表示处理请求的回调函数，针对不同请求的path，处理不同的业务逻辑 前端路由很重要的一点是页面不刷新，前端路由就是把不同路由对应不同的内容和页面的任务交给前端来做， 每转到不同的url都是使用前端的锚点路由。 随着SPA单页应用的不断普及，前后端开发分离，目前羡慕基本都是用前端路由，在 项目使用期间页面不会重新加载。 vue核新概念 Vue Router是vue.js的核心深度集成，主要包含的功能有： 嵌套的路由/视图表： 模块化的、基于组件的路由配置 基于Vue.js过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的CSS class的链接 HTML5 history模式或hash模式，在IE9中自动降级 自定义的滚动条行为 vue router的引入可以通过npm引入，也可以通过script的方式来引入，例如：
<script src="../js/vue-router.js"></script>用Vue.js+Vue Router创建单页应用，是非常简单的。 使用Vue.js已经可以通过组合组件来组成应用程序，当把Vue Router添加进来后， 需要做的是将组件components映射到路由（routes）,然后告诉Vue Router在哪里渲染它们， 下面是一个基本例子,定义router四步骤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 用Vue.js+Vue Router创建单页应用，是非常简单的。
使用Vue.js已经可以通过组合组件来组成应用程序，当把Vue Router添加进来后，
需要做的是将组件components映射到路由（routes）,然后告诉Vue Router在哪里渲染它们，
下面是一个基本例子： -->
</div>
<script src="../js/vue.js"></script>
<!-- 先引入vue的核心库，再引入router的核心库 -->
<script src="../js/vue-router.js"></script>
<script>
// 1、定义组件
/*
推荐：
1、组件变量名->首字母大写
2、路径->以/开头小写
3、命名路由（name）->小写
*/
let Login = {
template:'<div><h1>登录组件</h1></div>'
}
let register = {
template:'<div><h1>注册组件</h1></div>'
}
// 2、定义路由列表
/*
在router里面配置每一个路由，每一个路由就是一个对象
path：表示路由路径，字符串，需要以/开头
component:表示路由对应的组件
*/
let routes = [
{
path:'/login',components:'Login'
},
{
path:'/reg',components:'Register'
}
]
//3、创建router实例,当引入Vue.router之后，VueRouter就会成为全局函数
let router = new VueRouter({
//配置路由列表,配置项的名称routes
routes:routes
})
let vm = new Vue({
el : "#app",
data : {
},
//4、将创建号的rouer实例，绑定给vue实例的router属性
router
})
</script>
</body>
</html>
标签：Vue,前端,path,组件,router,路由 From： https://www.cnblogs.com/yansunda/p/18376394