# vue-router-demo

**Repository Path**: hongjunyong/vue-router-demo

## Basic Information

- **Project Name**: vue-router-demo
- **Description**: vue-router案例汇总
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2018-06-14
- **Last Updated**: 2023-10-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue-Router
## 1 基本介绍
### 1.1 官方文档
	https://router.vuejs.org/zh/

### 1.2 介绍

> Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为

### 1.3 效果图
![效果图](https://upload-images.jianshu.io/upload_images/21134959-2758e92aba71aba6.gif?imageMogr2/auto-orient/strip)

### 1.4 线上演示地址
	http://vuerouter.myoli.xin

### 1.5 码云地址（欢迎Star）
https://gitee.com/hongjunyong/vue-router-demo

## 2 DEMO布局搭建
### 2.1 设置首页为登录页
> 步骤一、引入登录页面

```
import login from '@/pages/login'
```

> 步骤二、使用登录页

```
const router = new Router({
  // 去掉地址栏上的#号
  // mode: 'history',
  // 选中时通过添加类名添加样式
  linkActiveClass: 'router-active',
  scrollBehavior,
  routes: [
    // 登录页
    {
      path: '/',
      component: login
    }
  ]
})
```

### 2.2 圣杯布局

> 步骤一、页面布局（main.vue） --> 知识点：router-view

![圣杯布局-效果图](https://upload-images.jianshu.io/upload_images/21134959-f8ee49b85717d84d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

> main.vue代码如下
```
<template>
  <div>
    <!-- 头部 begin -->
    <div class="header"></div>
    <!-- 头部 end -->

    <!-- 菜单 begin -->
    <div class="sideMenu"></div>
    <!-- 菜单 end -->

    <!-- 内容 begin -->
    <div class="content"></div>
    <!-- 内容 end -->

    <!-- 版权 begin -->
    <div class="footer">版权 @qishon 2018</div>
    <!-- 版权 end -->
  </div>
</template>
```

> 步骤二、引入相关页面

```
import main from '@/pages/main'
```

> 步骤三、路由嵌套（index.router.js）

```
const router = new Router({
  // 去掉地址栏上的#号
  // mode: 'history',
  // 选中时通过添加类名添加样式
  linkActiveClass: 'router-active',
  scrollBehavior,
  routes: [
    // 主内容
    {
      path: '/main',
      component: main,
      // 子路由嵌套
      children: [
        // 仪表盘
        // 切记这里的路由路径没有/
        {
          path: 'dashboard',
          component: dashboard
        }
      ]
    }
  ]
})
```

## 3 初级知识点
### 3.1 我的第一个路由
> 1 路由配置

```
const router = new Router({
  // 去掉地址栏上的#号
  // mode: 'history',
  // 选中时通过添加类名添加样式
  linkActiveClass: 'router-active',
  scrollBehavior,
  routes: [
    // 主内容
    {
      path: '/main',
      component: main,
      // 子路由嵌套
      children: [
        // 第一个路由
        {
          path: 'first',
          // 别名使用
          alias: 'firstAlias',
          component: first
        }
      ]
    }
  ]
})
```
> 2 点击标签，实现跳转（需要带上/main路径，布局才会被划分4个部分） --> 知识点：router-link、默认是a标签的形式

```
 <router-link to="/main/first">我的第一个路由</router-link>
```

### 3.2 获取到路由name的值
> 1 路由配置

```
const router = new Router({
  // 去掉地址栏上的#号
  // mode: 'history',
  // 选中时通过添加类名添加样式
  linkActiveClass: 'router-active',
  scrollBehavior,
  routes: [
    // 主内容
    {
      path: '/main',
      component: main,
      // 子路由嵌套
      children: [
        // 获取到路由name的值
        {
          path: 'name',
          name: 'qishon',
          component: name
        }
      ]
    }
  ]
})
```

> 2 使用$route.name获取到路由name的值

	{{$route.name}}

### 3.3 地址栏传递参数
> 1 路由配置

```
const router = new Router({
  // 去掉地址栏上的#号
  // mode: 'history',
  // 选中时通过添加类名添加样式
  linkActiveClass: 'router-active',
  scrollBehavior,
  routes: [
    {
      path: '/main',
      component: main,
      // 子路由嵌套
      children: [
        // 地址栏传递参数
        {
          path: 'params/:id/:name',
          component: params
        }
      ]
    }
  ]
})
```

> 2 router-link传递参数

```
<router-link to="/main/params/1314/qishon">地址栏传递参数</router-link>
```

> 3 使用$route.params.xx获取参数

```
id:{{$route.params.id}}
name:{{$route.params.name}}
```

### 3.4 地址栏传递参数（加入正则）
> 1 路由配置

```
const router = new Router({
  // 去掉地址栏上的#号
  // mode: 'history',
  // 选中时通过添加类名添加样式
  linkActiveClass: 'router-active',
  scrollBehavior,
  routes: [
    // 主内容
    {
      path: '/main',
      component: main,
      // 子路由嵌套
      children: [
        // 地址栏传递参数
        {
          path: 'params/:id/:name',
          component: params
        },
        // 地址栏传递参数（加入正则）
        {
          path: 'params2/:id(\\d+)/:name',
          component: params2
        }
      ]
    }
  ]
})
```

> 2 路由使用

- 正确（id只能传入数字）
```
<router-link to="/main/params2/520/qs">地址栏传递参数（加入正则）</router-link>
```


- 错误（id不能传入字符串类型）
```
<router-link to="/main/params2/abc/qs">地址栏传递参数（加入正则）</router-link>
```

### 3.5 N个参数 地址栏上看不到参数
> 1 知识点：使用:to进行路由跳转（与之前的跳转方式不一样）、name对应的是路由的name、使用params进行传递参数
```
<router-link :to="{ name: 'paramsMultiple', params: { username: 'qishon', age: 1818 }}">N个参数 地址栏上看不到参数</router-link>
```

> 2 页面上参数接收 --> 知识点：$route.params
```
{{$route.params.username}}
{{$route.params.age}}
```

### 3.6 N个参数 地址栏上带参数 --> http://localhost:8080/#/main/paramsMultiple2?username=zz&age=22
> 1 知识点：path进行路径跳转、使用query参数传递
```
<router-link :to="{ path: '/main/paramsMultiple2', query: { username: 'zz', age: 22 }}">N个参数 地址栏上带参数</router-link><br/>
```

> 2 页面上参数接收 --> 知识点：$route.query（与上面接收方式有所区别）
```
{{$route.query.username}}
{{$route.query.age}}
```

### 3.7 重定向
> 1 路由配置
```
    // 重定向
    {
      path: 'redirect/:id(\\d+)/:name',
      redirect: '/main/params2/:id(\\d+)/:name'
    }
```

> 2 路由使用
```
<router-link to="/main/redirect/22/qishon">重定向</router-link>
```

### 3.8 动态设置路由（push）
```
    <button @click="goForward">动态设置路由（push）</button>

    // 不带参数
    goForward () {
        this.$router.push('/main/forward')
    }

    // 带参数
    this.$router.push({name:'/volume-detail', params: {
        addressInfo: this.addressInfo
    }})
```

### 3.9 后退 --> 知识点：go(-1)、push
```
	<button @click="goBack">后退</button><br/>

	goBack () {
        window.history.length > 1
          ? this.$router.go(-1)
          : this.$router.push('/main/dashboard')
      }
```


### 3.10 利用路由别名alias跳转
> 1 路由配置
```
    // 第一个路由
    {
      path: 'first',
      // 别名使用
      alias: 'firstAlias',
      component: first
    },
```

> 2 路由使用
```
<router-link to="/main/firstAlias">返回（利用路由别名alias跳转）</router-link><br/>
```

### 3.11 beforeRouteEnter（进入路由时触发）、beforeRouteLeave（离开路由时触发）
> 可以写到路由配置里，但是只能监听到进入时的事件，离开时没办法监听到，所以一般写到对应的页面里
```
    beforeRouteEnter:(to, from, next)=>{
      console.log("准备进入路由模板");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开路由模板");
      next();
    }
```

### 3.12 tag设置路由标签形式
> router-link默认是a标签的形式
```
<router-link tag="div" to="/main/tag">tag</router-link>
```

### 3.13 404错误（要放到所有路由的后面）
```
    {
      path: '*',
      component: error
    }
```

### 3.14 去掉地址栏上的#号
```
mode: 'history'
```

### 3.15 选中时通过添加类名添加样式
```
linkActiveClass: 'router-active'
```

### 3.16 a标签与router-link跳转的区别

- router-link组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的a标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名；而a标签实现路由跳转没有表示激活的css类名。

>  router-link比起写死的 a href="/#/main/a" 会好一些，理由如下：

1. 无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
2. 在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
3. 当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。


> a标签路由跳转 及 参数传递（a标签传递参数要在href的前缀加上/#/）、取值跟router-link一样
```
	<a href="/#/main/a/123/abc">a标签跳转路由</a><br>
	<a href="/#/main/a2?id=123&name=abc">a标签跳转路由</a><br>
```

> a标签可以跳转到外部连接，而router-link不能跳转到外部连接
```
	<a href="http://www.baidu.com">a标签可以跳转外链</a><br>
	<router-link to="http://www.baidu.com">router-link标签不能跳转外链</router-link><br>
```

## 4 课堂练习

	this.$router.push 和 this.$router.replace的区别

[站外图片上传中...(image-244344-1619677286013)]

- router.replace和router.push唯一的不同就是，不会向history添加新记录，而是替换掉当前的history记录

## 4 中高级知识点
### 4.1 路由拆分

> 在index.router.js引入模块路由文件
```
import routerDemo from '@/router/routerDemo.router'
```

> 在index.router.js的routes里使用路由文件
```
...routerDemo
```

### 4.2 路由动画
> 知识点：transition、mode
```
	<!-- mode="in-out" 先进入后退出 -->
	<!-- mode="out-in" 先退出再进入 -->
	<transition name="fade" mode="out-in">
	  <router-view></router-view>
	</transition>
```

> 动画效果
```

	/*
    fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
    fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
    fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
    fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。*/
	.fade-enter {
		/* 完全透明 */
		opacity:0;
	}
	.fade-leave{
		/* 完全不透明 */
		opacity:1;
	}
	.fade-enter-active{
		transition:opacity .2s;
	}
	.fade-leave-active{
		opacity:0;
		transition:opacity .2s;
	}
```

### 4.3 路由懒加载（优点：避免应用初始化速度慢）
```
component: () => import('@/pages/router/11-import')
```

### 4.4 路由自定义参数
> 定义参数
```
	  {
	    path: 'import',
	    meta: {
	      title: '动态引入',
	      url: 'qishon.com'
	    },
	    // 懒加载
	    component: () => import('@/pages/router/11-import')
	  },
```

> 获取参数
```
{{$route.meta.url}}
```

### 4.5 keep-alive缓存（用处：缓存用户表单信息、分页等）
> 在meta上自定义属性，keepAlive用于判断页面是否需要缓存
```
	{
		path: 'keepAlive',
		meta: {
		  keepAlive: true
		},
		component: () => import('@/pages/router/13-keep-alive')
	},

	<transition name="fade" mode="out-in">
		<keep-alive>
		  <router-view v-if="$route.meta.keepAlive"></router-view>
		</keep-alive>
	</transition>

	<transition name="fade" mode="out-in">
		<router-view v-if="!$route.meta.keepAlive"></router-view>
	</transition>
```

### 4.6 beforeRouteUpdate
```
    beforeRouteUpdate (to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      console.log('触发')
      next()
    }
```

### 4.7 beforeEach全局守卫（用处：设置标题）
```
	/**
	 * 全局守卫
	 *  to: 即将要进入的目标 路由对象
	 *  from: 当前导航正要离开的路由
	 *  next(): 进行管道中的下一个钩子
	 */
	router.beforeEach((to, form, next) => {
	  // 路由变化修改title
	  let routerTitle = to.meta.title || '路由demo演示'
	  window.document.title = routerTitle
	  next()
	})

```

### 4.8 scrollBehavior滚动行为（类似于跳转锚点、记录滚动条滚动的位置）
> 1 在index.router.js里加入如下代码
```
	/**
	 * 滚动行为
	 * @param to 要进入的目标路由对象，到哪里去
	 * @param from 离开的路由对象，哪里来
	 * @param savedPosition 会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}
	 * @returns {*}
	 */
	const scrollBehavior = function (to, from, savedPosition) {
	  if (to.hash) {
	    return {selector: to.hash}
	  }
	}
```

> 2 在routes引入

> 3 路由配置
```
<router-link :to="{path:'/scroll#anchor2'}">滚动行为</router-link>
```

## 5 THE END