1. 简介
路由，工作原理与路由器相似（路由器将网线总线的IP分发到每一台设备上），Vue中的路由根据用户在网页中的点击，将其引导到对应的页面。
2. 使用步骤
安装vue-router或者直接引入vue-router.js（下载地址：https://router.vuejs.org/）
例：SPA页面（Single Page Application，将一个网站的所有页面写在一个文件，通过不同的div进行区分，再通过div的显示、隐藏实现跳转效果）
- 定义组件对象（页面）、组件模板、注册组件
- 定义router-link、router-view
- router-link：组件会被解析为a标签
- router-view：路由显示的内容会在 router-view 中显示
- 定义路由规则
- 注册到根组件中
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title></title> ???<script type="text/javascript" src="vue.js"></script> ???????<script type="text/javascript" src="vue-router.js"></script></head><body> ???<div id="app"> ???????<!-- 4. 定义router-link、router-view --> ???????<div> ???????????<router-link to=‘/home‘>首页</router-link> ???????????<router-link to=‘/setting‘>设置</router-link> ???????????<router-view></router-view> ???????</div> ???????????</div> ???<!-- 2. 定义组件模板 --> ???<template id="home"> ???????<div> ???????????<h3>首页页面</h3> ???????</div> ???</template> ???<template id="setting"> ???????<div> ???????????<h3>设置页面</h3> ???????</div> ???</template> ???<script type="text/javascript"> ???????//1. 定义组件对象 ???????let Home = {template:‘#home‘} ???????let Setting = {template:‘#setting‘} ???????//5. 定义路由规则 ???????let route = new VueRouter({ ???????????routes:[ ???????????????{ ???????????????????path:‘/home‘, ???????????????????component:Home ???????????????}, ???????????????{ ???????????????????path:‘/setting‘, ???????????????????component:Setting ???????????????} ???????????] ???????????????}) ???????let app = new Vue({ ???????????el:"#app", ???????????//3. 注册到根组件中 ???????????components:{ ???????????????Home, ???????????????Setting ???????????}, ???????????//6. 注册到根组件中 ???????????router:route ???????}) ???????????????</script></body></html>3. 嵌套路由
实际开发时，一个页面常会嵌套多个组件（页面），如：设置页面中包括个人设置、系统设置等
- 定义组件对象、组件模板、注册组件
- 定义router-link、router-view
- 嵌套的路由，router-link、router-view 定义在嵌套的地方
- 定义路由规则
- 嵌套的路由，通过 children 属性定义
?<div id="app"> ???????<!-- 4. 定义router-link、router-view --> ???????<div> ???????????<router-link to=‘/home‘>首页</router-link> ???????????<router-link to=‘/setting‘>设置</router-link> ???????????<router-view></router-view> ???????</div> ???????????</div> ???<!-- 2. 定义组件模板 --> ???<template id="home"> ???????<div> ???????????<h3>首页页面</h3> ???????</div> ???</template> ???<template id="setting"> ???????<div> ???????????<h3>设置页面</h3> ???????????<router-link to="/setting/user">个人设置</router-link> ???????????<router-link to="/setting/system">系统设置</router-link> ???????????<router-view></router-view> ???????</div> ???</template> ???<template id="user"> ???????<div> ???????????<h3>个人设置页面</h3> ???????</div> ???</template> ???<template id="system"> ???????<div> ???????????<h3>系统设置页面</h3> ???????</div> ???</template> ???<script type="text/javascript"> ???????//1. 定义组件对象 ???????let Home = {template:‘#home‘} ???????let Setting = {template:‘#setting‘} ???????let User = {template:‘#user‘} ???????let System = {template:‘#system‘} ???????//5. 定义路由规则 ???????let route = new VueRouter({ ???????????routes:[ ???????????????{ ???????????????????path:‘/home‘, ???????????????????component:Home ???????????????}, ???????????????{ ???????????????????path:‘/setting‘, ???????????????????component:Setting, ???????????????????children:[ ???????????????????????{ ???????????????????????????path:‘/setting/user‘, ???????????????????????????component:User ???????????????????????}, ???????????????????????{ ???????????????????????????path:‘/setting/system‘, ???????????????????????????component:System ???????????????????????} ???????????????????] ???????????????} ???????????] ???????????????}) ???????let app = new Vue({ ???????????el:"#app", ???????????//3. 注册到根组件中 ???????????components:{ ???????????????Home, ???????????????Setting, ???????????????User, ???????????????System ???????????}, ???????????//6. 注册到根组件中 ???????????router:route ???????}) ???????????????</script>
4. 动态路由
同一个路由地址，根据传递的不同参数，显示不同的内容，如：商品详情页，多个商品共用一个页面（带有动态参数）
- 定义路由规则时，将动态参数使用 :变量 进行参数绑定
<div id="app"> ???????<!-- 4. 定义router-link、router-view --> ???????<div> ???????????<router-link to=‘/detail/1‘>手机1</router-link> ???????????<router-link to=‘/detail/2‘>手机2</router-link> ???????????<router-view></router-view> ???????</div> ???????????</div> ???<!-- 2. 定义组件模板 --> ???<template id="detail"> ???????<div> ???????????<h3>商品详情页</h3> ???????????<p>商品id是：{{this.$route.params.id}}</p> ???????</div> ???</template> ???<script type="text/javascript"> ???????//1. 定义组件对象 ???????let Detail = {template:‘#detail‘} ???????//5. 定义路由规则 ???????let route = new VueRouter({ ???????????routes:[ ???????????????{ ???????????????????//说明：该处为动态参数，通过this.$route.params.id获取 ???????????????????path:‘/detail/:id‘, ???????????????????component:Detail ???????????????} ???????????] ???????????????}) ???????let app = new Vue({ ???????????el:"#app", ???????????//3. 注册到根组件中 ???????????components:{ ???????????????Detail ???????????}, ???????????//6. 注册到根组件中 ???????????router:route ???????}) ???????????????</script>5. 编程式路由
编程式路由，通过js代码实现页面跳转，类似 js 代码 window.location 实现页面跳转
<div id="app"> ???????<div> ???????????<button @click="show">查看手机2商品详情</button><br> ???????????<router-link to=‘/detail/1‘>手机1</router-link> ???????????<router-link to=‘/detail/2‘>手机2</router-link> ???????????<router-view></router-view> ???????</div> ???????????</div> ???<template id="detail"> ???????<div> ???????????<h3>商品详情页</h3> ???????????<p>商品id是：{{this.$route.params.id}}</p> ???????</div> ???</template> ???<script type="text/javascript"> ???????let Detail = {template:‘#detail‘} ???????let route = new VueRouter({ ???????????routes:[ ???????????????{ ???????????????????path:‘/detail/:id‘, ???????????????????component:Detail ???????????????} ???????????] ???????????????}) ???????let app = new Vue({ ???????????el:"#app", ???????????components:{ ???????????????Detail ???????????}, ???????????router:route, ???????????methods:{ ???????????????show(){ ???????????????????this.$router.push({path:‘/detail/2‘}) ???????????????} ???????????} ???????}) ???????????????</script>6. 路由重定向
重定向，当访问一个路由地址时，自动跳转至其他的路由地址
例：当打开路由页面时，不显示任何内容（默认无匹配的路由规则）
例子代码
修改代码（在routes中添加红色部分的内容）
routes:[ ???????????????{ ???????????????????path:‘/home‘, ???????????????????component:Home ???????????????}, ???????????????{ ???????????????????path:‘/‘, ???????????????????redirect:‘/home‘, ???????????????????component:Home ???????????????}, ???????????????{……} ???????????] ???????直接打开当前页面时，自动跳转到/home页面（重定向）
Vue.js 相关知识（路由）
原文地址：https://www.cnblogs.com/writerW/p/9069102.html