vue创建路由vue-router

vue创建路由需要注意：
如果使用的2.0版本的vue,那就使用3.0版本的vue-router
使用的是3.0版本的vue，那就使用4.0版本的vue.router
安装vue-router

npm install vue-router@3//我这里使用的是2版本的vue，所以用3版本的vue-router

安装完后，配置main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

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

在src下创建一个router文件夹，存放路由配置文件index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
import about from '../components/About'
import home from '../components/Home'
Vue.use(VueRouter)

export default new VueRouter({
    routes: [{
            path: '/about',
            component: about
        },
        {
            path: '/home',
            component: home
        }
    ]
})

文件目录

app文件

<template>
  <div id="app">
    <router-link to="/about">about</router-link>
    <router-link to="/home">home</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
 
}
</script>

<style>
</style>

配置完成，这样就可以使用路由 了