vue路由使用流程(手动)

(使用了我自己的文件内容,可以对照自己文件夹内容进行修改噢)

0. 下载与导入vue-router

• 下载vue-router (npm i vue-router@3.6.5)
• 导入vue-router(在main.js中)

0.导入路由
import VueRouter from 'vue-router'

使用vue的插件,都需要调用vue.use()
Vue.use(VueRouter)

1. 导入组件

• @符号代表src文件夹的绝对路径
• 写在main.js中

//1 . 导入组件

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

2.创建路由规则

• 路由规则作用 : 设置url 和 组件 对应的规则
• main.js

// 2. 创建路由规则

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

3.创建路由对象

• 路由对象 : 帮你管理这些路由规则
• main.js

// 3. 创建路由对象

const router = new VueRouter ({