路由

什么叫路由

其实是标记到资源的映射关系, 在前端vue 项目中, url 路径和组件的映射关系

为什么用到路由

vue 都是单页面应用, 所有内容都是在同一个页面中实现

靠路由实现页面的跳转, 没有真正 html 跳转

组件的两种分类

本质上没有不一样, 方便使用一般放在两个文件夹内

/src/views (pages) 页面组件

/src/components 复用组件

在一个项目当中引入路由系统

一共四步, 写在 main.js 里面

// 1. 引入库
import VueRouter from 'vue-router'
// 2.在 Vue 安装这个库
Vue.use(VueRouter)
// 3. 创建一个实例
const router = new VueRouter({
  // 这里可以有配置对象
})

// 全局注册指令
// Vue.directive(指令名字符串,配置对象)

new Vue({
  // 4. 挂载到 new Vue 根实例上
  router,
  render: h => h(App),
}).$mount('#app')

基本使用方式

路由配置的两种方法

// 1 引入组件对象 2 指定对应路径
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
const routes = [
  {
    // 1. path 路径 / 开头
    path: '/find',
    // 2. component 组件
    component: Find
  },
    //第一种
    //import 。。。 from "。。。";这种方式引入就是一次性引入多少就一次性加载多少（性能没那么好）
  {
    path: '/my',  //路径
    component: My  //组件名
  }，
    //第二种
     {
    path: "/login",
    //4.按需引入,也就是当用户访问login页面的时候才加载login.vue组件（性能好一点）
    component: () => import("../views/login.vue"),
  },
]
// 3.2 创建路由实例, 放入配置表
const router = new VueRouter({
  // 这里可以有配置对象
  // 有个属性叫routes是路由配置表,指定 url=>组件的配对
  routes //固定写法不能更改（上面的对象跨域更改，但是如果不一样的话要加冒号写上更改的名字，所以我们一般起一样的名字）
})

挂载点

<template>
  <div>
    <!-- 路由第三方库给我们提供了两个组件, router-view router-link -->
    <!-- router-view 是路由的挂载点, 指定需要显示路由组件的地方 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

高亮

使用 router-link 跳转即可, 自带类名, 写 css 即可

传参的方式

两种传递方式

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my?name=小明">我的音乐</router-link>
      <router-link to="/part/666789">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

两种接收方式

重定向和模式

重定向写在 routes 路由配置数组中

 {
    // 每当用户访问根路径 / 的时候, 自动跳转到 /find
     //重定向，当用户访问localhost:8000的时候强制跳转登录页面
    path: '/',
    redirect: '/find'
  },

404 页面解决方案

  {
    path: '*',   //404页面，用户输入的地址都匹配不到的话输出404页面
    component: Page404
  }

路由模式, 去除 # 号优点是好看

// 3.2 创建路由实例, 放入配置表
const router = new VueRouter({
  // 这里可以有配置对象
  // 有个属性叫routes是路由配置表,指定 url=>组件的配对
  routes,
  // 修改路由拼接模式, history 减少一个#13号,优点好看一些
  mode: 'history'
})

编程时导航

基本使用

export default {
  methods: {
    handleClick() {
      console.log('点击了有个按钮');
      // 方式1, 直接 path 作为字符串传入 
      // this.$router.push('/my')
      // 方式2 传入一个对象, 其中带有 path 属性
      // this.$router.push({
      //   path: '/my'
      // })
      // 方式3 传入一个对象, 其中带有 name 属性, 需要在路由中预先配置
      this.$router.push({
        name: 'MyPage'
      })
    }
  }
}

可以传参

    handleClick() {
      console.log('点击了有个按钮');
      // 方式1, 直接 path 作为字符串传入 
      // this.$router.push('/my')
      // 方式2 传入一个对象, 其中带有 path 属性
      // this.$router.push({
      //   path: '/my'
      // })
      // 方式3 传入一个对象, 其中带有 name 属性, 需要在路由中预先配置
      this.$router.push({
        // 需要 params 传参的话
        // path 跟 params 两个属性会冲突
        // path: 'part/8888',
        name: 'partPage',
        params:{
          id: 66666
        }
      })
    }
  }

嵌套路由

路由配置嵌套

// routes 配置中添加
  {
    // 1. path 路径 / 开头
    path: '/find',
    // 2. component 组件
    component: Find,
    redirect: '/find/ranking',
    // 嵌套子路由
    children: [
      // 依旧是 path 跟 component 的配对
      // 不要加斜杠, 因为需要改上一层拼接在一起
      // 如果加了, 就需要在根路径进行访问
      {
        path: 'ranking',
        component: Ranking
      },
      {
        path: 'recommend',
        component: Recommend
      },
      {
        path: 'songlist',
        component: SongList
      },
    ]
  },

页面挂载点嵌套

在需要显示children 的页面中添加二级挂载点这里是 /views/Find.vue

<template>
  <div>
    <router-link class="myLink" to="/find/ranking">排行榜</router-link>
    <router-link class="myLink" to="/find/songlist">歌单</router-link>
    <router-link class="myLink" to="/find/recommend">推荐</router-link>

    <!-- 显示二级路由组件需要一个挂载点 -->
    <router-view></router-view>
  </div>
</template>

导航守卫

// router 创建实例之后
// 可以往这个 router 路由实例添加导航守卫(路由守卫)
// 全局前置, 所有页面跳转之前都会经过
router.beforeEach((to, from, next)=>{
  console.log('到达了导航守卫');
  // 拦住了必须放行, 默认这个函数可以接收到三个参数
  // to 目的地, from 来源, next 放行回调函数
  console.log(to);
  console.log(from);
  // 如果你来到了我的音乐但是有没有token就要跳转到登录页
  if (to.path === '/my' && !localStorage.getItem('token')) {
    // 这个 next 可以再里面带上 path 进行跳转
    next('/login')
  }else {
    next()
  }
})

vant 组件库

地址：vant-contrib.gitee.io/vant/v2/#/z…

引入全部组件

npm i vant@2 之后再 main.js 引入

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

手动按需引入

import { Button } from 'vant';
import 'vant/lib/button/style';
Vue.use(Button);

自动按需引入

跟手动区别不大，除了不用引入样式，不过安装一个插件来实现

import { Button } from 'vant';
Vue.use(Button);

安装步骤

# 安装插件命令
npm i babel-plugin-import -D

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}
//一般用这个配置
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

路由的概念，路由的使用步骤，路由的用途等等，vant2组件库的使用步骤

路由