vue路由

前端有个onhashchange事件，监听浏览器hash值得变化
手动监听路由：
  created() {
    window.onhashchange = () => {
      console.log("监听到了hash的变化", location.hash)
      switch (location.hash) {
        case '#/home':
          this.comName = 'Home';
          break
        case '#/about':
          this.comName = 'About';
          break
        case '#/movie':
          this.comName = 'Movie';
          break
      }
    }
  },

安装路由包：
vue i vue-router@3.5.2 -S
新建router/index.js
1.导入vue和vueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
2.调用Vue.use()函数,把VueRouter变为Vue的插件
Vue.use(VueRouter)
3.创建路由的实例对象
const router =new VueRouter()
4.向外共享路由的实例对象
export default router

使用方法：
1.需要展示的地方插入<router-view></router-view>标签
2.router文件夹下index.js文件中导入vue组件
3.实例对象中建立hash与组件的对应关系
const router = new VueRouter({
  routes [
    {path:'/hash值'，companent:组件名}
]
})
子路由：
  routes [
    {path:'/hash值'，companent:组件名，redirect:需要重定位的hash地址,children[
    {path:'hash值',companent:组件名}
]}
]
默认子路由：当其中的path值为空时，它就是默认子路由
  routes [
    {path:''，companent:组件名，redirect:需要重定位的hash地址,children[
    {path:'hash值',companent:组件名}
]}
]

动态路由匹配：
将path后面指定hash值改为：id从而实现动态跳转
    { path: '/movie/:id', component: Movie, props: true },

编程式导航API：
1.this.$router.push('hash地址')
  跳转到指定的hash地址，并增加一条历史记录
2.this.$router.replace('hash地址')
  跳转到指定的bash地址，并替换掉当前的历史记录
3.this.$router.go(数值n)

//通过$router.back()方法进行实现后退历史记录
<button @click="$router.back()">后退</button>
//通过$router.forward()方法实现前进历史记录
<button @click="$router.forward()">前进</button>

导航守卫：
控制路由访问权限