1.介绍
2. 使用步骤(5+2)
(1).下载VueRouter模板,注意版本号
vue2使用 vuerouter3.x 和vue3.x(233)
vue3使用 vuerouter4.x 和vue4.x(344)
在终端输入,下载VueRouter
npm install vue-router@3.5.6 --save
下面的步骤都是在main.js文件中进行
(2).引入VueSouter
import VueRouter from 'vue-router'
(3).安装注册
Vue.use(VueRouter)
(4).创建路由对象
const router = new VueRouter()
(5).将路由对象注入到new Vue实例中,建立联系
第三行可以简写是因为名字相同,router:'对象名‘
new Vue({
render: h => h(App),
router
}).$mount('#app')
(6).创建需要的组件(views目录),配置路由规则
(7).配置导航,'#/路径'![](https://i-blog.csdnimg.cn/blog_migrate/c8f1715e9680f3990cce5ee8ebe160ea.png)
main.js
import Vue from 'vue'
import App from './App.vue'
// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中,建立关联
// 2个核心步骤
// 1. 建组件(views目录),配规则
// 2. 准备导航链接,配置路由出口(匹配的组件展示的位置)
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // 3.安装注册,VueRouter插件初始化
const router = new VueRouter({
// routes 路由规则们
// route 一条路由规则 { path: 路径, component: 组件 }
routes: [
{ path: '/find', component: Find },
{ path: '/my', component: My },
{ path: '/friend', component: Friend },
]
})
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
//5. 注入到new Vue中,建立关联
// 第21行如果是r, 则第35行是 router : r
}).$mount('#app')
app.vue
<template>
<div>
<div class="footer_wrap">
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/friend">朋友</a>
</div>
<div class="top">
<!-- 路由出口 → 匹配的组件所展示的位置 -->
<router-view></router-view>
</div>
</div>
</template>
3.views和components文件夹
views用来存放配合路由使用的组件
components用来存放复用的组件