vue-router路由的完整配置流程

1.下载、导入包

首先下载对应路由版本的包

npm i vue-router

导入vue-router

// 导入路由
import VueRouter from '/文件路径/vue-router'
// 使用vue的插件，都需要调用Vue.use()
Vue.use(VueRouter)

2.导入组件

 根据已有的vue文件来导入需要的

import find from '@/views/find.vue'
import my from '@/views/my.vue'
import friend from '@/views/friend.vue'
import notfound from '@/views/notfound.vue'

3.配置路由规则

const routes = [
{ path:'/find',component:find},
{ path: '/my', component: my },
{ path: '/friend', component: friend },
{ path: '/notfound', component: notfound },
]

4.创建路由对象

const router = new VueRouter({
    routes
})

5.挂在路由

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

6.添加路由出口

<router-view></router-view>

7.添加路由导航

<router-link>导航栏内容</router-link>