十七、Vue之路由

（一）安装 vue-router 插件

cnpm install vue-router --save

（二）引入 vue-router 并 Vue.use(VueRouter) (main.js)

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

Vue.use(VueRouter);

（三）配置路由

1.创建组件并引入组件

（1）Left.vue

<template>
    <div>
        我是左兄弟组件
        <br>
        <button @click="toRight()">我要传值给右兄弟</button>
    </div>
</template>

<script>
// 1.引入VueEvent(广播事件对象)
import VueEvent from "../util/VueEvent.js";

export default {
    data() {
        return {
            todo: '待取数值'
        }
    },
    methods: {
        toRight() {
            //2.广播待传递的数值
            VueEvent.$emit('msg-left', "开门，左兄弟送温暖了！");
        }
    },
    mounted() {
        //3.接收非兄弟组件传递过来的数值
        VueEvent.$on('msg-right',(data) => {
            console.log(data);
        });
    }
}
</script>

（2）Right.vue

<template>
    <div>
        我是右兄弟组件
        <br>
        <button @click="toLeft()">我要传值给左兄弟</button>
    </div>
</template>

<script>
// 1.引入VueEvent(广播事件对象)
import VueEvent from "../util/VueEvent.js";

export default {
    methods: {
        toLeft() {
            //2.广播待传递的数值
            VueEvent.$emit('msg-right', "开门，右兄弟送温暖了！");
        }
    },
    mounted() {
        //3.接收非兄弟组件传递过来的数值
        VueEvent.$on('msg-left',(data) => {
            console.log(data);
        });
    }
}
</script>

（3）main.js

//在根节点引入组件
import Left from "./components/Left.vue";
import Right from "./components/Right.vue";

2.定义路由(main.js)

// 2.配置路由
const routes = [
  { path: '/left', component: Left },
  { path: '/right', component: Right },
  // 默认跳转路由（‘*’表示没有匹配到任何路由，此时重定向到默认路由，相当于默认加载首页的意思）
  { path: '*', redirect: '/left' }
]

3.实例化VueRouter(main.js)

// 3.实例化VueRouter
const router = new VueRouter({
  // 缩写，相当于 routes: toutes
  routes
})

4.挂载路由(main.js)

new Vue({
  render: h => h(App),
  // 4.挂载路由
  router
}).$mount('#app')

5.​​<router-view></router-view>​​放入根组件App.vue(App.vue)

6.访问配置的路由

（1）通过url

注意：此时访问http://localhost:8080/将是空白，因为并未将Left.vue和Right.vue作为组件放入App.vue。

1.访问左组件

http://localhost:8080/#/left

2.访问右组件

http://localhost:8080/#/right

（2）通过导航（类似于超链接）

​​<router-link>​​​和​​<router-view>​​必须配合使用，才会有导航的效果！！！

<template>
    <div id="app">
        <router-link to="/left">左组件</router-link>
        <router-link to="/right">右组件</router-link>
        <br>
        <hr>
        <br>
        <router-view></router-view>
    </div>
</template>

（四）使用代码实现路由跳转

//跳转回首页
            this.$router.push('/')