vue路由使用流程(手动)

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

0. 下载与导入vue-router

• 下载vue-router (npm i [email protected])
• 导入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 ({

        routes // (缩写) 相当于 routes:routes
})

4.挂载路由到根组件

• 挂载到根组件作用: 让你的整个应用都有路由功能
• main.js

// 4. 挂载路由到根组件

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

5.添加路由出口

• 路由出口作用: 占位盒子, 用于渲染路由匹配到的组件

                :是vue内置的一个组件,会自动替换成路由匹配的组件

• App.vue

    //路由出口
    

6.路由导航

• 路由导航作用: 默认会渲染成一个a标签,用于路由跳转
• :是vue内置的一个组件,最终会渲染成a标签,to属性会被渲染成a标签的href属性

一些小细节,让大家更好的记住!!!

                        router ： 路由对象.  管理路由,负责路由跳转
                        routes :   路由规则数组.  路径 和 组件 一一对应的关系
                        $router : 路由对象.  管理路由,负责路由跳转
                        $route:   路由信息对象。  负责存储路由信息: 路径、参数