关于vue-router可能需要注意到的事项

import Vue from './view-global';
import VueRouter from 'vue-router'
import App from './micro/app.vue'
import Home from './micro/home'
import Login from './micro/login'
import About from './micro/about'
import User from './micro/user'
const router = new VueRouter({
    mode: 'hash',
    routes: [
        { path: '/home', name: 'Home', component: Home, meta: { title: "主页" } },
        { path: '/login', name: 'Login', component: Login, meta: { title: "登录" } },
        { path: '/about', name: 'About', component: About, meta: { title: "关于" } },
        { path: '/user', name: 'User', component: User, meta: { title: "用户" } }
    ]
})
Vue.use(VueRouter)
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')
// app.vue
<template>
    <div>
        <router-link to="/home" class="default-styles"> Home </router-link><br>
        <router-link to="/login" class="default-styles">Login</router-link><br>
        <router-link :to="{ path: '/about' }" class="default-styles">About</router-link><br>
        <router-link :to="{ name: 'User'}" class="default-styles">User</router-link>
        <router-view/>
    </div>
</template>
<style lang="less" scoped>
.default-styles{
    color: gray;
    font-size: 14px;
}
.router-link-active{
    color: red;
    font-size: 26px;
}
</style>

//字符串形式
<router-link to="/home">Home</router-link>
//动态绑定 v-bind
<router-link :to="'/home'">Home</router-link>
<router-link :to="{ path: '/home' }">Home</router-link>
<router-link :to="{ name: 'User'}">User</router-link>
// 带参数 参数在url 获取参数 this.$route.query
<router-link :to="{ name: 'User', query: {color: 'red' }}">query带参数</router-link>
// 带参数 获取参数 this.$route.params
<router-link :to="{ name: 'User', params: { color: 'red' }}">params带参数</router-link><br>
tag 类型string，默认值a
// 如果想要 <router-link> 渲染成某种标签，例如 <li>
<router-link :to="'/home'" tag="li">Home</router-link>
// 如果此时我们想要在这个li标签中添加a标签,如下所示，可以不为a标签添加href属性即可哦
<router-link :to="{ name: 'User', params: { color: 'red' }}" tag="li">
    <a>User</a>
</router-link>

// 修改激活选中的class类名
<router-link :to="{ name: 'User', query: {color: 'red' }}" active-class="activeClass">带参数</router-link>
// 全局修改
const router = new VueRouter({
    mode: 'hash',
    linkActiveClass: 'activeClass', // 全局配置
    routes: [
        { path: '/home', name: 'Home', component: Home, meta: { title: "主页" } },
        { path: '/login', name: 'Login', component: Login, meta: { title: "登录" } },
        { path: '/about', name: 'About', component: About, meta: { title: "关于" } },
        { path: '/user', name: 'User', component: User, meta: { title: "用户" } }
    ]
})

<router-link to="/article" active-class="router-active"></router-link>
// 当用户访问 /article/1 时会被激活为
<a href="#/article" class="router-active"></a>
// 修改一下
<router-link to="/article" exact-active-class="router-active"></router-link>
// 当用户访问 /article/1 时会被激活为，不会激活这个link的class
<a href="#/article"></a>

<li><router-link to="/">全局匹配</router-link></li>
<li><router-link to="/" exact>exact严格匹配</router-link></li>

<router-link to="/article" event="mouseover">article</router-link>

<router-link to="a" append>Home</router-link>

Router.beforeEach((to,from,next) => {
    window.document.title= to.meta.title
})

// 2.8.0 新增
const router = new VueRouter({
    scrollBehavior (to, from, savedPosition) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({ x: 0, y: 0 })
            }, 500)
        })
    }        
})

{ path: '/user', name: 'User', component：require(['./micro/user'], resolve), meta: { title: "用户" } }

// setTimeout 演示ajax
const User= Vue.component('later', function (resolve) {
    setTimeout(function () {
        require(['./user.vue'], resolve)
    }, 3000);
});
components: {
   User
},

// 更高级的异步组件
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

<div id="app">
    <a class="hash a">#a.html</a>
    <a class="hash b">#b.html</a>
</div>
<script>
    // 再点击时注意观看浏览器地址栏
    document.querySelectorAll('.hash').forEach( function(item, index) {
      item.addEventListener('click',(e)=>{
        e.preventDefault()
        var link = item.textContent;
        location.hash=  link;
      },false)
    });
    //每点一下都会触发-hashchange
    window.addEventListener('hashchange', (e)=>{
      console.log({
        location: location.href,
        state: location.hash,
        e:e
      })
    });
</script>

<div id="app">
    <a class="api a">a.html</a>
    <a class="api b">b.html</a>
</div>
<script>
// 再点击时注意观看浏览器地址栏
document.querySelectorAll('.api').forEach( function(item, index) {
    item.addEventListener('click',(e)=>{
        e.preventDefault()
        var link = item.textContent;
        window.history.pushState({name:'api'},link,link);
      },false)
    });
    // 下面说一下replaceState，其实跟pushState差不多，只是replaceState()修改当前历史记录条目，而不是创建一个新的。
    // 在点击浏览器的后腿前进按钮时会触发-popstate 
    window.addEventListener('popstate', (e)=>{
      console.log({
        location: location.href,
        state: e.state,
        e:e
      })
});
</script>

router.beforeEach((to, from, next) => {
    console.log('全局前置守卫: beforeEach')
    next()
})
router.beforeResolve((to, from, next) => {
    console.log('全局解析守卫: beforeResolve')
    next()
})
router.afterEach((to, from) => {
    console.log('全局后置钩子: afterEach')
})

beforeRouteEnter(to, from, next) {
    console.log('进入前：beforeRouteEnter')
    next()
},
beforeRouteUpdate(to, from, next) {
    console.log('路由改变时：beforeRouteUpdate') // 比如user/123，切到user/456,才会触发
    next()
},
beforeRouteLeave(to, from, next) {
    console.log('离开前：beforeRouteLeave')
    next()
}

const router = new VueRouter({
    mode: 'history',
    routes: [
      {
        path: '/user',
        component: User,
        beforeEnter: function guardRoute(to, from, next) {
    // 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
          console.log('导航路由独享守卫：beforeEnter')
          next()
        }
      }
    ]
})