Vue-Router快速入门

首先要明白一点，Vue-Router是做“跳转”功能，当然只是表面形式上的跳转，实质是DOM元素的卸载和挂载，页面并未跳转，但是效果是看到url
发生了变化，但是注意发生变化的是"#"哈希值后面的值，实质上并未跳转页面，但是路由內部是通过window.onhashchange实现监听

随着版本更替，history路由已经出现，它是用现代浏览器的新特性，实现

window.history.pushState(state, title, url) 
// state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
// title：标题，基本没用，一般传 null
// url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/

window.history.replaceState(state, title, url)
// 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录

window.addEventListener("popstate", function() {
	// 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发				
});

window.history.back() // 后退
window.history.forward() // 前进
window.history.go(1) // 前进一步，-2为后退两步，window.history.lengthk可以查看当前历史堆栈中页面的数量

跳转的三要素

1. 跳转的内容

//定义路由组件  Foo 和 Bar
const Foo = { template: '<div>这是Foo组件哦</div>' }
const Bar = { template: '<div>这是Bar组件哦</div>' }

2. 将内容挂载到对应的请求资源路径上

就像超链接点击，其实是跳转路径，请求资源

//将路由挂载到对应的资源路径 就像超链接一样
const routes = [  //route其实是路线的名字 一个路由对应一个对象
  {
    path: '/', //访问路径
    name: 'Home',   //访问名称
    redirect: '/foo'
  },
  {
    path: '/foo', //访问路径
    name: 'Foo',   //访问名称
    component: Foo
  },
  {
    path: '/bar',
    name: 'Bar',
    component: Bar
  }
]//这里是路由列表 一级路线

//router 才是路由的意思
const router = new VueRouter({
  // [mode]可选参数 mode: 'history' 默认是'hash'
  routes
})

路线 匹配是从上往下检索的，上面也说了，是监听页面hash值变化，通过遍历判断，匹配那个路由，并且由于routes是一个数组，肯定就有访问的先后顺序

1. 每个路线，都表现为一个对象，对象有属性

property	desc
path	资源组件挂载到的路径，访问到该路径，自然显示该组件
name	资源路径的名称，考虑到路径path可能太长，不便开发成员编写
component	资源组件，一般是一个组件option对象，（如果是命名视图，那就是对象包含各种组件）
redirect	重定向，就是自动跳转功能，
alias	访问到 alias的值时，就相当于访问到了path
children	该层级路线下的子路线

3. 跳转的"超链接"

//创建App
const vm = new Vue({
  router,
  el: '#app',
  name: 'App',
  template: `
  <div id="app">
    这是app组件
    <div>
      <router-link to="/foo">我要看Foo组件</router-link>
      <router-link to="/bar">我要看Bar组件</router-link>
    </div>
    
    <router-view></router-view> 
    <!-- router-view 是路由显示的位置，切换路由的时候，这块内容动态的变化 -->
  </div>
  `
})