189 8069 5689
小编给大家分享一下vue-router路由与页面间导航的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
10多年专注建站、设计、互联网产品按需网站策划服务，业务涵盖高端网站设计、商城开发、小程序设计、软件系统开发、成都App制作等。凭借多年丰富的经验，我们会仔细了解每个客户的需求而做出多方面的分析、设计、整合，为客户设计出具风格及创意性的商业解决方案，创新互联建站更提供一系列网站制作和网站推广的服务，以推动各中小企业全面信息数字化，并利用创新技术帮助各行业提升企业形象和运营效率。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
vue-router
我们知道路由定义了一系列访问的地址规则，路由引擎根据这些规则匹配找到对应的处理页面，然后将请求转发给页进行处理。可以说所有的后端开发都是这样做的，而前端路由是不存在"请求"一说的。
前端路由是找到地址匹配的一个组件或者对象将其渲染出来。改变浏览器地址不向服务器发送请求有两种方法，
一是在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航；二是使用HTML5的window.history功能，使用URL的hash来模拟一个完整的URL。
vue-router是官方提供的一套专用的路由工具库，是vue的一个插件，我们需要在全局引用中通过vue.use()将它引入到vue实例中，
使用vue-cli创建项目后（init初始化时vue-router确认y）
我们先来看一下项目src的结构，通过cmd进入到项目src目录下，执行 tree -f > list.txt 生成结构树（保存在list.txt中）：
结构如下：
src ├─assets // 静态资源 │ └─image // 图片 │ ├─components // 组件 │ └─HelloWorld │ HelloWorld.vue │ └─router // 路由配置 │ └─index.js │ │ App.vue // 默认程序入口 │ main.js │
1、打开main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})第10行将配置的路由绑定到vue实例上，第11行在vue实例中使用render方法来绘制这个vue组件(App)完成初始化
Render是vue2新增的具有特色的方法，为了得到更好的运行速度，vue2也采用的类似react的Virtual Dom（虚拟Dom）
2、然后我们在components中注册几个组件
3、打开router/index.js配置路由
import Vue from 'vue'
import Router from 'vue-router'
import Singer from '@/components/rank/rank'
Vue.use(Router) // 注册router
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: MHeader // 路由中指定组件
},
{
path: '/rank',
name: 'rank',
component: Rank
}
]
})路由的模式
关键词："mode"，"history模式"，"hash模式"，"Abstract模式"
我们可以在创建的Router中使用模式，如参数mode:history的参数，这个值意思是使用history模式，这种模式充分利用了history.pushState API来完成URL的跳转而无需重新加载页面 ，
如果不使用history模式，当访问rank的时候路由就会变成：
http://localhost/#rank
反之为：
http://localhost/rank
这就是history模式和hash模式的区别，除此之外还有一种abstract模式
Hash：使用URL hash值作为路由，
History：依赖HTML5 History API和服务器配置
Abstract：支持所有JavaScript运行环境，如node服务器端。如果发现没有浏览器的API，路由就会强制进入这个模式
路由与导航
关键词："router-link" , "router-view"
vue-router提供两个指令标签组件来处理这个导航与自动渲染逻辑：
我们使用整两个标签组件来完成一个简单的页面布局：
在路由使用时要明确一个原则就是：不直接引用路由定义，（即不要在router-link直接通过 to='conpontents/rank/rank' 来导向路由），当显式引用路由定义的URL一旦发生变化，所有引用的地方都要修改。
在router-link通过名称引用路由：向to属性传入一个对象显式的声明路由的名称：
这里留意使用v-bind绑定（简写：），因为这里需要向router-link传递的是一个对象{ name:'rank' }而不是一个字符串
动态路由
关键词："动态路由参数"，"params"，"$router.params"
vue-router将参数融入到路由的路径定义之内成为路由的一部分，我们称这种参数为"动态路径参数"；
使用非常简单，在参数名之前加上":"，然后将参数写在路由定义的path内，
routers：[{
name:'BookDetails',
path:'books/:id',
component:BookDetails
}]1、这样定义之后，vue-router就会自动匹配/books/1、/books/2、...、/books/n 形式的路由模式，因为这样定义的路由的数量是不确定的，所以也称为"动态路由"。
2、在
