1. 安装Vue Router
2. 初步使用路由
3. 路由应用
4. 高级应用

安装Vue Router

1. 安装Vue-router本身：npm install vue-router
2. 在main.js中启用路由插件：

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)

初步使用路由

//index.vue
<template>
    <div>欢迎来到首页</div>
</template>

<script>
    export default {
        name: "about"
    }
</script>

<style scoped>
    div {
        font-size: 2rem;
        text-align: center;
    }
</style>

//about.vue
<template>
    <div>关于本站</div>
</template>

<script>
    export default {
        name: "about"
    }
</script>

<style scoped>
    div {
        font-size: 2rem;
        text-align: center;
    }
</style>

1. 一般创建一个数组作为路由表，每一个元素是一个路由匹配规则对象。这个对象path属性对应URL，而component属性对应组件对象。
2. 使用这个路由表数组，使用new VueRouter({routes:路由表数组})创建路由对象。
3. 根实例渲染的组件需要编写特殊的渲染路由的标签
4. 将路由对象设置为根实例router属性的值，然后挂载根实例。
5. 如果要使用Webpack-dev-server，需要加上一个参数--history-api-fallback，所有的路由都会指向index.html。

import Vue from "vue";
import VueRouter from "vue-router"

import App from "./app.vue";
import Index from "./index.vue";
import About from "./about.vue";

Vue.use(VueRouter);

//1 创建路由表数组
const routes = [
    {
        path: "/index",
        component: Index
    },
    {
        path: "/about",
        component: About
    }
];

//2 使用路由表数组创建路由对象

const router = new VueRouter({
    mode: "history",
    routes
});

//3 根实例组件使用特殊的标签router-view，根据URL加载不同组件。
<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "app"
    }
</script>

<style scoped>
</style>

//4 创建Vue根实例并挂载app，路由动态渲染的标签写在app.vue中。

const app = new Vue({
    router,
    render: h => h(App)
}).$mount("#app");

//5 配置Webpack-dev-server
"scripts": {
    "dev": "webpack-dev-server --open --history-api-fallback"
},

路由应用

路径重定向

const routes = [
    {
        path: "/index",
        component: Index
    },
    {
        path: "/about",
        component: About
    },
    {
        path: "/query",
        redirect: "/about"
    },
    {
        path: "*",
        redirect: "/index"
    }
];

动态路由匹配

1. 路由对象中设置动态路由参数，类似path: '/user/:id'
2. 匹配的参数会被传递到this.$route.params，可以在每个组件中使用。在组件中访问this.$route得到的是当前这个组件的路由对象。

{
    path: "/user/:id",
    component: User
},

<template>
    <div>
        <p>当前用户的id是 {{$route.params.id}}</p>
    </div>
</template>

<script>
    export default {
        name: "user",
        mounted() {
            console.log("获取了用户ID");
            console.log(this.$route.params.id);
        }
    }
</script>

<style scoped>
    div p {
        color: brown;
        font-size: 1.5rem;
    }
</style>

{
    path: "/post/:year/:month",
    component: Post
},

导航

1. 使用router-link标签生成链接
2. 使用JavaScript来捕获点击事件然后处理

<template>
    <div>
        <h1>柚子小站</h1>
        <p>
            <router-link to="/index">Go to index</router-link>
            <router-link to="/about">Go to about</router-link>
            <label>输入用户ID
                <input type="number" v-model="url"><router-link :to="'/user/'+url">跳转到用户ID界面</router-link>
            </label>
        </p>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "app",
        data:function () {
            return {
                url: ""
            }
        }
    }
</script>

<style>
    h1 {
        text-align: center;
        background-color: black;
        color: orange;
        margin-top: 0;
    }

    a {
        display: block;
    }

    body{
        margin: 0;
        padding: 0;
    }
</style>

<a href="/index" class="router-link-exact-active router-link-active">Go to index</a>
<a href="/about" class="">Go to about</a>
<a href="/user/" class="">跳转到用户ID界面</a>

1. tag，指定渲染为什么标签，比如tag="li"就会渲染成LI标签
2. replace，一个属性，加上就可以生效，不会在HISTORY里留下记录，所以无法回退
3. active-class，如果点击的链接的路由匹配成功，会自动给当前对应的这个标签添加一个router-link-active，如果精确匹配，还会添加一个router-link-exact-active。可以修改这个样式名称，但一般不推荐修改。

<template>
    <div>
        <p>关于本站</p>
        <button @click="handleClick">跳转到66号用户</button>
    </div>
</template>

<script>
    export default {
        name: "about",
        methods: {
            handleClick() {
                this.$router.push("/user/66");
            }
        }
    }
</script>

<style scoped>
    div {
        font-size: 2rem;
        text-align: center;
    }
</style>

1. replace，与路由对象的replace方法类似，不在HISTORY中留下记录。
2. go(Number)，和window.history.go()类似，指定回退的步数。

嵌套路由

const routes = [
    {
        path: "/index",
        component: Index,
        children: [
            {
                path: "home",
                component: Home
            }
        ]
    },

// index.vue
<template>
    <div>
        <p>首页内容</p>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "about"
    }
</script>

<style scoped>
    div {
        font-size: 3rem;
        text-align: center;
    }
</style>

//home.vue
<template>
    <div>HOME组件的内容</div>
</template>

<script>
    export default {
        name: "home"
    }
</script>

<style scoped>

</style>

命名路由和命名视图

高级应用

全局导航守卫

// index.js
......
const routes = [
    {
        path: "/index",
        component: Index,
        children: [
            {
                path: "home",
                component: Home
            }
        ],
        meta:{
            title: "网站首页"
        }
    },
    {
        path: "/about",
        component: About,
        meta:{
            title: "关于本站"
        }
    },
    {
        path: "/user/:id",
        component: User,
        meta:{
            title: "用户信息"
        }
    },
    {
        path: "/post/:year/:month",
        component: Post,
        meta:{
            title: "文章信息"
        }
    },
    {
        path: "*",
        redirect: "index",
        meta:{
            title: "无法匹配URL"
        }
    },
];

......

// 注册全局前置守卫
router.beforeEach(function(to, from, next){
    window.document.title = to.meta.title;
    next();
});

1. next(false)，中止导航，即跳转不生效。如果用户手动按了后退，会变成from参数的地址
2. next(URL)，可以跳转到具体的地址，这个地址可以是写死的，也可以是路由的名称，此时需要传入一个对象：{ path: '/' }，凡是用在router-link中的属性都可以使用。
3. next(error)，抛出一个错误给router.onError()注册过的回调函数。

router.beforeEach(function(to, from, next){
    window.document.title = to.meta.title;
    window.scrollTo(0, 0);
    next();
});

router.beforeEach(function (to, from, next) {
    var token = sendajax(username, password);
    if (validate(token)) {
        next();
    }else{
        next('/login');
    }
});

全局导航顺序

router.beforeEach(function(to, from, next){
    console.log("第一个守卫");
    window.document.title = to.meta.title;
    next();
});

router.beforeEach(function(to, from, next){
    console.log("第二个守卫");
    window.scrollTo(0, 0);
    next();
});

router.beforeEach(function (to, from, next) {
    console.log("第三个守卫");
    next();
});

路由级别的导航守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件级别的导航守卫

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}