一、路由
单页应用程序: SPA - Single Page Application
VueRouter 的 介绍
作用：修改地址栏路径时，切换显示匹配的组件说明：Vue 官方的一个路由插件，是一个第三方包
官网：https://v3.router.vuejs.org/zh/
vue2 对应 router3
vue3 对应 router4
VueRouter 的 使用
1、下载
1 npm i [email protected]
2、项目中新增views目录，存放各个视图页面
views/Find.vue
1 <template>
2 <div>
3 <p>我的音乐</p>
4 <p>我的音乐</p>
5 <p>我的音乐</p>
6 <p>我的音乐</p>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 name: 'MyMusic'
13 }
14 </script>
15 <style>
16 </style>
views/Friend.vue
1 <template>
2 <div>
3 <p>我的朋友</p>
4 <p>我的朋友</p>
5 <p>我的朋友</p>
6 <p>我的朋友</p>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 name: 'MyFriend'
13 }
14 </script>
15 <style>
16 </style>
views/My.vue
1 <template>
2 <div>
3 <p>我的音乐</p>
4 <p>我的音乐</p>
5 <p>我的音乐</p>
6 <p>我的音乐</p>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 name: 'MyMusic'
13 }
14 </script>
15 <style>
16 </style>
3、根组件App.vue中添加路由出口，也就是用来路由到不同视图的位置
1 <template>
2 <div>
3 <div class="footer_wrap">
4 <a href="#/find">发现音乐</a>
5 <a href="#/my">我的音乐</a>
6 <a href="#/friend">朋友</a>
7 </div>
8 <div class="top">
9 <!-- 路由出口 → 匹配的组件所展示的位置 -->
10 <router-view></router-view>
11 </div>
12 </div>
13 </template>
14
15 <script>
16 export default {};
17 </script>
18
19 <style>
20 body {
21 margin: 0;
22 padding: 0;
23 }
24 .footer_wrap {
25 position: relative;
26 left: 0;
27 top: 0;
28 display: flex;
29 width: 100%;
30 text-align: center;
31 background-color: #333;
32 color: #ccc;
33 }
34 .footer_wrap a {
35 flex: 1;
36 text-decoration: none;
37 padding: 20px 0;
38 line-height: 20px;
39 background-color: #333;
40 color: #ccc;
41 border: 1px solid black;
42 }
43 .footer_wrap a:hover {
44 background-color: #555;
45 }
46 </style>
4、main.js中定义路由，并且注册到vue实例中，后续写项目会将路由单独写到router目录下index.js中，通过export导出定义的路由组件，然后在main.js中导入定义的路由进行注册
1 import Vue from 'vue'
2 import App from './App.vue'
3
4 // 路由的使用步骤 5 + 2
5 // 5个基础步骤
6 // 1. 下载 v3.6.5
7 // 2. 引入
8 // 3. 安装注册 Vue.use(Vue插件)
9 // 4. 创建路由对象
10 // 5. 注入到new Vue中，建立关联
11
12 // 2个核心步骤
13 // 1. 建组件(views目录)，配规则
14 // 2. 准备导航链接，配置路由出口(匹配的组件展示的位置)
15 import Find from './views/Find'
16 import My from './views/My'
17 import Friend from './views/Friend'
18 import VueRouter from 'vue-router'
19 Vue.use(VueRouter) // VueRouter插件初始化
20
21 const router = new VueRouter({
22 // routes 路由规则们
23 // route 一条路由规则 { path: 路径, component: 组件 }
24 routes: [
25 { path: '/find', component: Find },
26 { path: '/my', component: My },
27 { path: '/friend', component: Friend },
28 ]
29 })
30
31 Vue.config.productionTip = false
32
33 new Vue({
34 render: h => h(App),
35 router
36 }).$mount('#app')
组件存放目录问题
路由的封装抽离
1、目录结构
2、路由目录
router/index.js
1 import Find from '@/views/Find'
2 import My from '@/views/My'
3 import Friend from '@/views/Friend'
4
5 import Vue from 'vue'
6 import VueRouter from 'vue-router'
7 Vue.use(VueRouter) // VueRouter插件初始化
8
9 // 创建了一个路由对象
10 const router = new VueRouter({
11 // routes 路由规则们
12 // route 一条路由规则 { path: 路径, component: 组件 }
13 routes: [
14 { path: '/find', component: Find },
15 { path: '/my', component: My },
16 { path: '/friend', component: Friend },
17 ]
18 })
19
20 export default router
3、视图目录
views/Find.vue
1 <template>
2 <div>
3 <p>发现音乐</p>
4 <p>发现音乐</p>
5 <p>发现音乐</p>
6 <p>发现音乐</p>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 name: 'FindMusic'
13 }
14 </script>
15 <style>
16 </style>
views/Friend.vue
1 <template>
2 <div>
3 <p>我的朋友</p>
4 <p>我的朋友</p>
5 <p>我的朋友</p>
6 <p>我的朋友</p>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 name: 'MyFriend'
13 }
14 </script>
15 <style>
16 </style>
views/My.vue
1 <template>
2 <div>
3 <p>我的音乐</p>
4 <p>我的音乐</p>
5 <p>我的音乐</p>
6 <p>我的音乐</p>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 name: 'MyMusic'
13 }
14 </script>
15 <style>
16 </style>
4、根组件App.vue
1 <template>
2 <div>
3 <div class="footer_wrap">
5 <a href="#/find">发现音乐</a>
6 <a href="#/my">我的音乐</a>
7 <a href="#/friend">朋友</a>
8 </div>
9 <div class="top">
10 <!-- 2、路由出口 → 匹配的组件所展示的位置 -->
11 <router-view></router-view>
12 </div>
13 </div>
14 </template>
15
16 <script>
17 export default {};
18 </script>
19
20 <style>
21 body {
22 margin: 0;
23 padding: 0;
24 }
25 .footer_wrap {
26 position: relative;
27 left: 0;
28 top: 0;
29 display: flex;
30 width: 100%;
31 text-align: center;
32 background-color: #333;
33 color: #ccc;
34 }
35 .footer_wrap a {
36 flex: 1;
37 text-decoration: none;
38 padding: 20px 0;
39 line-height: 20px;
40 background-color: #333;
41 color: #ccc;
42 border: 1px solid black;
43 }
44 .footer_wrap a:hover {
45 background-color: #555;
46 }
47 </style>
5、main.js
1 import Vue from 'vue'
2 import App from './App.vue'
3 import router from './router/index'
4
5 Vue.config.productionTip = false
6
7 new Vue({
8 render: h => h(App),
9 router
10 }).$mount('#app')
标签：VUE,07,views,Vue,vue,router,import,路由 From： https://www.cnblogs.com/wang1001/p/18120524