vue router其实质是在HTML5 historyAPI、window.onpopstate、window.onhashchange上（onhashchange 事件在当前 URL 的锚部分(以 ‘#’ 号为开始) 发生改变时触发 。）做的封装，通过一定的规则映射到对应的方法上，同时通过监听变化，从而实现单页路由。
将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。 html
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div>JavaScript
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义（路由）组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器， 或者，只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例，然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 现在，应用已经启动了！（1）我们经常需要把某种模式匹配到所有路由，全都映射到同一个组件；例如，我们有一个user组件，对于所有ID各不同的用户，都要使用这个组件来渲染，那么我们可以在vue-router的路由路径中使用[动态路径参数]来达到这个效果
const User={ template:'<div>User</div>' } const router=new VueRouter({ routes:[ { //动态路径参数以冒号开头 path:'/user/:id', component:User } ] })/user/foo跟/user/bar都将映射到相同的路由； 一个[路径参数]使用冒号标记，当匹配到一个路由时，参数值会被设置到this.$route.params;可以在每个组件内部使用；
const User={ template:'<div>{{$route.params.id}}</div>' }（2）可以在一个路由中设置多段[路径参数]，对应的值都会设置到$.route.params中
模式匹配路径$route.params/user/:username/user/evan{ username: ‘evan’ }/user/:username/post/:post_id/user/evan/post/123{username: ‘evan’, post_id: 123 }（3）响应路由参数的变化 当使用路由参数时，原来的组件实例会被复用，因为2个路由都渲染同一个组件；比起销毁再创建，复用显得更加高效；不过这也意味着组件的生命周期钩子不会再被调用；复用组件时，相对路由参数的变化做出相应的话，你可以简单的watch(监测变化)$route对象
const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } }注意，以/开头的嵌套路径会被当做根路径，这让你充分的使用嵌套组件而无需设置嵌套的路径；
1：router.push(location)
声明式编程式< router-link :to=’…’>router.push(…)以上2个方法产生的效果是一样的；向history栈添加一个新的记录；所以用户点击浏览器的回退按钮时，返回到的之前的URL；点击< router-link >时，router.push(…)这个方法会在内部调用；该方法的参数可以是一个字符串路径，或者一个描述地址的对象，例如 (params的时候必须用name,不能用path，name名称必须是路由组件名，而且页面刷新以后params会清空)
//字符串 router.push('home') //对象 router.push({path:'home'}) //命名的路由(params的时候必须用name,不能用path，name名称必须是路由组件名，而且页面刷新以后params会清空) router.push({ name:'user' , params:{ userId:123 } }) //带查询参数，变成 /register?plan=private router.push({ path:'register' , query: { plan:'private' } })2：router.replace(location) 他不会向history添加新记录，而是替换当前的history记录；
声明式编程式< router-link :to=’…’ replace>router.replace(…)3：router.go(n) 该方法的参数是一个整数，意思是在history记录中向前或者后退多少步；
// 在浏览器记录中前进一步，等同于 history.forward() router.go(1) // 后退一步记录，等同于 history.back() router.go(-1) // 前进 3 步记录 router.go(3) // 如果 history 记录不够用，那就默默地失败呗 router.go(-100) router.go(100)你也许注意到 router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像， 实际上它们确实是效仿 window.history API 的。
因此，如果你已经熟悉 Browser History APIs，那么在 vue-router 中操作 history 就是超级简单的。
创建router实例的时候，在routes配置汇总给某个路由设置名称
const router=new VueRouter({ routes:[ path:'/user/:userId', name:'user', component:User ] })要连接到一个命名路由，可以给router-link的to属性传一个对象
<router-link :to="{ name:'user' , params:{ userId:123 }}">User</router-link>跟router.push()是一回事 router.push({ name:’user’ , params:{ userId:123 } })
有时候想同时（同级）展示多个视图，而不是嵌套展示，这个时候命名视图就派上用场了。可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口；如果router-view没有设置名字，那么默认为default
<router-view class='view one'></router-view> <router-view class='view two' name='a'></router-view> <router-view class='view three' name='b'></router-view>一个视图使用一个组件渲染，因此对于同一个路由，多个视图就需要多个组件，确保正确的使用components配置
const router=new VueRouter({ routes:[ path:'/', components:{ default:FOO, a:Bar, b:Baz } ] })当用户访问/a时，URL将会被替换成/b，然后匹配路由为/b；
const router=new VueRouter({ routes:[ { path:'/a', redirect:'/b' } ] })重定向的目标也可以是一个命名的路由
const router-new VueRouter({ routes:[ { path:'/a', redirect:{ name:'foo' } } ] })甚至是一个方法，动态返回重定向目标
const router=new VueRouter({ routes:[ { path:'/a', redirect: to=>{ //方法接受目标路由作为参数，return重定向的字符串路径/路径对象 } } ] })