前端路由的简单使用

路由理解的概念

路由：就是一一对应关系的集合。

前端路由（单页应用程序）： 一个url地址，对应哪个组件

后端路由：一个接口地址，对应哪一段接口地址

前端路由

一些组件不变,通过对url的hash值进行改变和监听，切换对应页面组件的dom结构

典中典就是网抑云了

网易云音乐的一级路由切换, 路径对应下面不同的组件页面

分析

根据地址栏变化（不重新向服务器发请求），去局部更新不同的页面内容，完成前端业务场景切换

现在开始手撸路由

1. 安装

npm i vue-router

安装的时候要注意,这样直接安装默认安装最新版,也就是4版本的.但是vue2只能用3版本的.如果你用的vue2,我建议安装3.5.3版本,这个版本的router在npm官网上下载量最多

vue2安装代码

npm i vue-router@3.5.3

2 开始路由基础配置

vue-router文档

1. vue脚手架快速生成一个vue2的骨架

2. 创建路由文件

   在src文件里创建一个router文件夹,和assets文件夹同级,

   在router文件夹里创建一个index.js文件

//1 index.js里导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'

//2 使用插件 - 重要
Vue.use(VueRouter)

//3 导入组件,这里导入的就是你自己写好准备切换的组件,

import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
import Page3 from './Page3.vue'


//4 创建路由规则
const router = new VueRouter({
  routes: [
    {
      path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时，
      component: Page1  // 装入组件 Page1
    },
    {
      path: "/page2",
      component: Page2
    },
    {
      path: "/page3",
      component: Page3
    }
  ]
})

//5 路由出口
export default router

使用路由 在main.js也要配置一下

import router from './router/index.js'

new Vue({
  router , // 使用路由
  render: h => h(App),
}).$mount('#app')

使用路由

//和占位符差不多的意思,把符合条件的组件显示在页面上
<router-view></router-view>

感觉还是好抽象

Router-link组件介绍

作用： 用于提供路由链接，实现页面跳转

格式: <router-link to="/home">首页</router-link>

要点：

• 是vue-router提供的组件
• router-link最终会渲染成a链接
• router-link自带链接导航高亮的功能

我做了一个简易版路由,直接上代码

文件夹

App.vue代码

<template>
<div>
  <router-link to="/mymusic">发现音乐</router-link> &nbsp;&nbsp;
  <router-link to="/see">我的音乐</router-link>&nbsp;&nbsp;
  <router-view></router-view>
</div>
</template>

<script>

export default {
    data(){
      return{
      }
    },  
};

</script>
<style>
body{
  background-color: skyblue;
  padding: 20px 30px;
}
a{
  text-decoration: none;
  font-size: 20px;
  color: #fff;
  background-color: orange;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  line-height: 40px;
}
</style>

mymusic文件代码

<template>
 <div>
  <router-link to="/recommend">推荐</router-link> &nbsp;&nbsp;
  <router-link to="/rank">排行榜</router-link>&nbsp;&nbsp;
  <router-link to="/song">歌单</router-link>
  <router-view></router-view>
 </div>
 
</template>

<script>
export default {

}
</script>

<style scoped>
div{
    margin-top: 20px;
    width: 1400px;
    height: 400px;
    background-color: #f6c08b;
}
</style>

rank文件代码

<template>
 <div>
   <div class="box">
  <h1>排行榜</h1>
 </div>
 </div>
</template>

<script>
export default {
mounted(){
}

}
</script>

recommend代码

<template>
<div>
<div class="box">
<h1>推荐音乐</h1>
 </div>
</div>
</template>

<script>
export default {

}
</script>

<style>
.box{
    line-height: 280px;
    text-align: center;
    margin: auto;
    width: 1200px;
    height: 280px;
    background-color: #f2a358;
}
</style>

see代码

<template>
 <div>
<h1>我的音乐</h1>
 </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

song代码

<template>
<div>
   <div class="box">
   <h1>歌单</h1>
 </div>
</div>
</template>

<script>
export default {
mounted(){
  console.log(this.$route.query);
}

}
</script>

访问不存在的页面还可以404

<template>
 <div>
   <img src="https://img0.baidu.com/it/u=715433461,3096649896&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=403" alt="">
 </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

网易云.js文件内容

// 导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'

// 使用插件 - 重要
Vue.use(VueRouter)

import error from '../网易云/components/404.vue'
import mymusic from '../网易云/components/mymusic.vue'
import recommend from '../网易云/components/recommend.vue'
import rank from '../网易云/components/rank.vue'
import song from '../网易云/components/song.vue'
import see from '../网易云/components/see.vue'

// 创建路由规则
const router = new VueRouter({
  routes: [
    {
      path: "/",
      redirect: "/mymusic"
    },
    {
      path: "/mymusic",
      component: mymusic,
       children: [
        {
          path: "",
          component: recommend,
        },
        {
          path: "/recommend",
          component: recommend,
        },
        {
          path: "/rank",
          component: rank,
         },
         {
           path: "/song",
           component: song,
         }
      ] 
    },
    {
      path: "/see",
      component: see
    },
    {
      path: "*",
      component: error
    }
  ]
})

export default router

main.js文件内容

import Vue from 'vue'

import App from './网易云/App.vue'

Vue.config.productionTip = false

import router from './router/网易云.js'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

随便撸了个简易的2级路由,要是能直接上传文件夹就好了.

具体的使用 抽象的有点说不出来,感觉是我自己还没有理解透彻.

vue好难啊