1. VueRouter 的 使用 (5 + 2)
参考官网
5个基础步骤 (固定)
- 下载 VueRouter 模块到当前工程,这里指定版本:3.6.5
yarn add vue-router@3.6.5
- 引入 vue-router
import VueRouter from 'vue-router'
- 安装注册
Vue.use(VueRouter) // VueRouter插件初始化
- 创建路由对象
// 两种方式: 二选一// 创建了一个路由对象(不包含路由信息)
const router = new VueRouter()// 创建了一个路由对象(包含路由信息)
const router = new VueRouter({mode: 'history',routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ name: 'searchcc', path: '/search/:words?', component: Search },{ path: '*', component: NotFound }]
})
- 注入,将路由对象注入到new Vue实例中,建立关联
new Vue({render: h => h(App),router // 这里是简写;全写为:router: router
}).$mount('#app')
2 个核心步骤
- 创建需要的组件 (views目录),配置路由规则
import Home from '@/views/Home'
import Search from '@/views/Search'
import NotFound from '@/views/NotFound'import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({mode: 'history',routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ name: 'searchcc', path: '/search/:words?', component: Search },{ path: '*', component: NotFound }]
})
- 配置导航,配置路由出口(路径匹配的组件显示的位置)
<template><div><div class="footer_wrap"><!-- 配置导航,配置路由出口 --><router-link to="/find">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">朋友</router-link></div><div class="top"><!-- 路由出口 → 匹配的组件所展示的位置 --><router-view></router-view></div></div>
</template>
2. 组件存放目录问题
组件分类:
- 页面组件
- 复用组价
存放原则:分类开来 更易维护
组件 | 存放位置 | 理由 |
---|---|---|
页面组件 | src/views文件夹 | 页面组件 - 页面展示 - 配合路由用 |
复用组件 | src/components文件夹 | 复用组件 - 展示数据 - 常用于复用 |