Element UI整合vue-router

引入依赖

"vue": "^2.5.16",
"vue-router": "2.8.1"

请注意，Vue Router 3.x 不兼容 Vue 2.x，而 Vue Router 2.x 不兼容 Vue 3.x。

import Vue from 'vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import App from './App.vue'
import Home from "./components/Home.vue";
import About from "./components/About.vue";

Vue.use(VueRouter)
Vue.use(ElementUI)
Vue.config.productionTip = false
//创建路由
let router = new VueRouter({
    routes:[
        //配置地址 和 组件的对应关系
        {path:"/",component:Home,},
        {path:"/about",component:About,}
    ]
})

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

Vue.use(VueRouter) 的作用

Vue.use(VueRouter) 的作用是让 Vue 使用 Vue Router 插件。

在 Vue 中使用第三方插件需要使用 Vue.use() 方法进行注册，这个方法会执行插件的 install() 方法，从而完成插件的安装。

在使用 Vue Router 时，需要先执行 Vue.use(VueRouter) 进行注册，然后才能在 Vue 实例中使用路由功能。

在 Vue.use() 内部，会调用 Vue Router 的 install() 方法进行插件的安装。在 install() 方法中，会给 Vue 实例添加 \(router 和 \)route 属性，分别表示路由器实例和当前路由信息。同时还会注册一个名为 router-view 的组件和一个名为 router-link 的全局组件，这些组件用于在 Vue 实例中渲染路由视图和创建导航链接。

因此，执行 Vue.use(VueRouter) 可以让 Vue 实例使用 Vue Router 插件提供的功能，包括路由配置、路由跳转、路由参数获取等。

Vue.component('RouterView', View)
Vue.component('RouterLink', Link)

<template>
  <div>
    <h1>{{ message }}</h1>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    };
  }
};
</script>