`Vue`

路由

概念

什么是路由

路由是接口与服务的一种映射关系。

vue 路由是路径和组件的映射关系。

路由运作方式

用户点击路由链接
导致url地址栏中hash值发生了变化
前端路由监听到了hash地址的变化
前端路由把当前hash地址对应的组件渲染到浏览器中。

路由的作用

可以在一个页面内，切换业务场景。

优点
1. 整体不刷新页面，用户体验感会更好。
2. 数据传递容易，开发效率高。
缺点
1. 开发成本高（需要学专业知识）。
2. 首次加载会很慢。
3. 不利于 SEO 搜索引擎抓取。

路由组件分类

对于 .vue 文件而言，总共分为两类，一类是复用组件，存放在 src/components 文件夹下；另一类是页面组件，存放在 src/views(或pages) 文件夹下。

页面组件：页面展示，配合路由使用。
复用组件：展示数据，常用于复用。

`vue-router` 介绍与使用

介绍

vue-router模块包

它和 Vue.js 深度集成

可以定义 - 视图表(映射规则)

模块化的

提供2个内置全局组件

声明式导航自动激活的 CSS class 的链接

……

使用

App.vue 组件中定义结构.

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a>
    </div>
    <div class="top">

    </div>
  </div>
</template>

安装并在 main.js 中导入路由。

npm i vue-router
import VueRouter from 'vue-router'

使用路由插件

// 在vue中，使用使用vue的插件，都需要调用Vue.use()
Vue.use(VueRouter)

Vue.use()用于给vue添加插件。

创建路由规则数组，参数 path 为路径，参数 component 为映射关系的组件。

    const routes = [
  {
    path: "/find",
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part
  }
]

定义hash地址与组件之间的对应关系。

创建路由对象 - 传入规则

const router = new VueRouter({
  routes
})

关联到vue实例
```
new Vue({
  router
})
```
在 App.vue 组件中的对应地方插入占位符
```
<router-view></router-view>
```

在模块化导入的时候，如果给定的不是具体的文件而是文件夹，则默认导入这个文件夹下的index.js文件。

1.创建路由.png

声明式导航

基础使用

vue-router 提供了一个全局组件 router-link
router-link 实质上最终会渲染成a链接 to属性等价于提供 href 属性(to无需#)
router-link 提供了声明式导航高亮的功能(自带类名)

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

<style scoped>
.footer_wrap .router-link-active{
  color: white;
  background: black;
}
</style>

只要配置了vue-router，就能使用router-view，它的作用很简单，就是一个占位符。

2.router-link.png

跳转传参

在 router-link 上的 to 属性传值, 语法格式如下

方式一:查询参数

在hash地址中，?后面的参数项叫做查询参数，需要使用this.$route.query来访问。
1. 传值: to="/path?参数名=值"
2. 接收: this.$route.query.参数名
方式二:路径参数

在hash地址中，/后面的参数项，叫做路径参数。需要使用this.$route.params来访问。
1. 传值: to="/path/值"
  
  在路由规则中,给对应的路由对象配置参数名,参数名前面要加冒号加以区分出来。
```
path: '/friend/:name',
```
2. 接收: this.$route.params.参数名

注意：

在this.$route中，path只是路径部分，只有路径参数，fullPath是完整路径，包括查询参数。

重定向

作用：用户匹配 path 后, 强制切换到目标 path 上。

网页打开 url 默认 hash 值是/路径。
redirect 是设置要重定向到哪个路由路径。

const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  }
]

4.路由重定向.png

404页面

作用：如果路由 hash 值, 没有和数组里规则匹配，则返回一个 404页面。

语法:

path 匹配 * (任意路径) – 前面不匹配就命中最后这个, 显示对应组件页面
component 匹配创建好的404组件

5.404页面.png

路由模式设置

路由分两种模式：用 mode 切换

hash 模式:默认模式,通过锚点来跳转,浏览器地址栏上带有#号

hash ：http://localhost:8080/#/home
history 模式：通过 history 对象的相关方法实现路由跳转，浏览器地址上不会带#。但是必须要有服务端的支持，否则访问不到页面。

history ：http://localhost:8080/home

可以看到最大的不同是路径上没有 #

模式修改：

const router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持, 模式是hash
})

6.切换路由模式.png

编程式导航

在行内使用编程式导航时，必须省略this，否则报错

push方法

利用 js 代码来实现跳转，并会留下历史记录。

this.$router.push({
    path: "路由路径",
    name: "路由名"
})

main.js 文件中在路由数组里给路由设置 name 属性。

{ 
  path: '/find',
  component: ()=>import('@/views/find.vue'),
  name:'find'
},
{ 
  path: '/my',
  component: ()=>import('@/views/my.vue'),
  name:'my'
},
{ 
  path: '/friend/:name',
  component: ()=>import('@/views/friend.vue'),
  name:'friend'
}

App.vue 组件中配合 js 代码实现跳转。

  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend/泽泽?name=超超">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 目标: 编程式导航 - js方式跳转路由
// 语法:
// this.$router.push({path: "路由路径"})
// this.$router.push({name: "路由名"})
// 注意:
// 虽然用name跳转, 但是url的hash值还是切换path路径值
// 场景:
// 方便修改: name路由名(在页面上看不见随便定义)
// path可以在url的hash值看到(尽量符合组内规范)
export default {
  methods: {
    btn(targetPath, targetName){
      // 方式1: path跳转
      this.$router.push({
        // path: targetPath,
        name: targetName
      })
    }
  }
};
</script>

注意：
如果路由的路径上需要传变量，即动态路由，我们是无法通过这种方式跳转页面，因为变量是必传值。解决方法：把变量改为可传值，即在变量后加个问号。
path: '/friend/:name?',
如果是在 to 属性中传的参数，用这种方法跳转页面后会接受不到参数，因为没有触发to属性，无法传参。

跳转传参

query

this.$router.push({
    path: "路由路径"
    query: {
        "参数名": 值
    }
})

// 对应路由接收   $route.query.参数名    取值

params

this.$router.push({
    name: "路由名",
    params: {
                "参数名": 值
    }
})

// 对应路由接收   $route.params.参数名   取值

格外注意：

使用 path 会自动忽略 params ，也就意味着使用 params 传参时如果是设置了 path 无法传参，结果为 undefined 。

7.编程式导航.png

replace方法

跳转到指定hash地址，并替换掉当前的历史记录。

this.$router.replace("路由路径")

go方法

调用 this.$router.go() 方法，可以在浏览历史中前进和后退。括号内填数值，正数前进，负数后退。

如果后退层数超过上限，则原地不动。

简化方法：后退方法：

this.$router.back()

前进方法·：

this.$router.forward()

路由嵌套

当我们想在一级路由下加上二级路由时，可以使用路由嵌套的形式。

步骤：

创建好二级路由的组件，推荐路径为 views 下创建一个二级路由文件夹，如 Second 。

返回 main.js 文件中创建二级路由，在一级路由下的 children 数组属性中创建。本次案例写在 find.vue 组件下。

{ 
  path: '/find',
  component: ()=>import('@/views/find.vue'),
  name:'find',
  children:[  // 二级路由
    {
      path:'ranking', // 一般情况下二级路由名字前面前面建议不加斜杆
      component:()=>import('@/views/Second/ranking.vue')
    },
    {
      path:'recommend',
      component:()=>import('@/views/Second/recommend.vue')
    },
    {
      path:'songlist',
      component:()=>import('@/views/Second/songlist.vue')
    },
  ]
},

注意：

一级路由的 path 的名字前面要加斜杠，但二级路由推荐不用加斜杠，避免不必要的报错。

运行，在浏览器上输入二级路由的路径，发现不报错，但也没有任何效果，如下图所示。

因为一级路由是用 router-view 占位符占位，因此二级路由也需要加上 router-view 占位符。同一级路由，也可以用 router-link 配合 to 进行声明式导航。
```

<router-link to="/find/ranking">排行榜</router-link>
<router-link to="/find/recommend">推荐</router-link>
<router-link to="/find/songlist">歌单</router-link>
<router-view></router-view>
```

1.二级路由.png

二级路由重定向

对于二级路由而言，也可以通过重定向的形式设置默认路由路径，设置方式与一级路由一致，使用 redirect 属性即可。

{ 
      path: '/find',
      component: ()=>import('@/views/find.vue'),
      name:'find',
      redirect:'/find/ranking',
      children:[]
    },

类名区别

使用 router-link 组件，组件会默认给我们两个激活类名。

router-link-active ：模糊匹配，浏览器地址栏上的 url 中 hash 值，包含 a 标签 href 属性的值的时候，设置此类名。
router-link-exact-active ：精确匹配，浏览器地址栏上的 url 中的 hash 值，与 href 属性值完全相同, 设置此类名。

2.类名.png

使用场景：

router-link-active ：一般情况下用于设置一级导航的高亮效果。

router-link-exact-active ：一般情况下用于设置二级导航的高亮效果。

前置守卫

在路由跳转之前, 先执行一次前置守卫函数, 判断是否可以正常跳转。

使用场景：进入某个页面时先判断用户是否已经登录。

步骤：

在 main.js 路由对象上使用固定方法 beforeEach 设置全局前置守卫，语法如下。
```
router.beforeEach((to,from,next)=>{

})
```
- to ：表示要到哪个页面上去。
- from ：表示从哪个页面跳转过来的。
- next ：表示放行的意思。必须设置，设置了前置守卫后，如果没有设置 next 变量，则无法实现页面跳转。
对前往的页面与状态值进行判断， to 方法有内置属性 .path ，可以知道用户要跳转到哪个页面上。如果符合条件，则条件，不符合则阻止。
```
let islogin=false
router.beforeEach((to,from,next)=>{
  if (to.path=='/my' && islogin==false) {
    console.log('wrong');
    next(false)
  }else{
    next()
  }
})
```
1. next三种调用方式
  - 直接放行：next()
  - 强制跳转登录页：next('/login')
  - 强制停留：next(false)

总结：

next() 放行, next(false) 留在原地不跳转路由, next(path路径) 强制换成对应 path 路径跳转。

3.前置守卫.png

`vant`

基础

介绍

vant 是一个轻量、可靠的移动端 Vue 组件库, 开箱即用。

官网：vant

全部引入

下载组件库 npm i vant@2 。（vue2 只支持2版本）

引入

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

Vue.use(Vant);

去官网复制使用其组件

自动按需引入

安装插件。
```
npm i babel-plugin-import -D
```

在 babel.config.js 文件中进行配置。

module.exports = { 
    plugins: [ 
        [
            'import', 
            { 
                libraryName: 'vant', 
                libraryDirectory: 'es', 
                style: true 
            }, 'vant'
        ] 
    ] 
};

注意：

引入配置后需要重启服务器才能生效。

根据文档在 main.js 中按需引入使用即可。

注意：

不能由自动按需引入的方式直接变为全部引入 vant ，会直接无效果报错。

解决方法：

把自动按需引入的配置删掉再重启服务器。

Vue 知识总结【路由】

Vue

路由

概念

什么是路由

路由运作方式

路由的作用

路由组件分类

vue-router 介绍与使用

声明式导航

基础使用

跳转传参

重定向

404页面

路由模式设置

编程式导航

push方法

跳转传参

replace方法

go方法

路由嵌套

二级路由重定向

类名区别

前置守卫

vant

基础

全部引入

自动按需引入

`Vue`

`vue-router` 介绍与使用

`vant`