vue知识点——路由（跳转页面、传参、keep-alive路由缓存、路由守卫等）

路由就是路径和组件的映射关系。
在一个页面里, 切换业务场景
单页面 SPA(single page web application) 应用
整个应用只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会做页面的局部更新
数据需要通过ajax请求获取

注意点：

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
通过切换，隐藏了的路由组件，默认是被销毁掉的，需要的时候再去挂载
每个组件都有自己的$route属性，里面存储着自己的路由信息
整个应用只有router，可以通过组件的$router属性获取到

二、路由安装

1.直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js 
2.npm安装vue-router,命令

npm i vue-router

3.应用插件：Vue.use(VueRouter)

三、路由配置 /router/index

1、普通路由配置（一级路由配置）

	// 1.在router/index文件中配置
    {
		path: '/user', //配置的路径
		name: 'user', //名称
		component: () => import('../views/user/UserView.vue') //对应的组件
	}

    // 2.在App.vue文件中配置
    <router-link to="/user">个人中心</router-link>
        
    3.在 App.vue 中通过 <router-view></router-view> 显示路由内容

2、嵌套路由配置

一配置：嵌套路由在router文件中配置children

{
		path: '/admin',
		name: 'admin',
		component: () => import("../views/admin/AdminView.vue"),
		// 注册二级路由
		children: [
			// 和普通路由一致,path前面没有 /
			{ path: "dash", name: "dash", component: () => import("../views/admin/HomeView.vue") },
            { ...},
            ......
       ]
},

二展示：嵌套路由的一级路由页面代码配置（/admin页面）

1-系统标题及基础菜单相关代码...
2-页面布局相关代码...
3-router-view展示各子路由模块
<keep-alive v-if="!!isKeep">
	<router-view/>
</keep-alive>
<router-view v-else/>

<router-view/>使用解释：<router-view/>标签是路由的出口标签，所以App.vue中的<router-view/>是vue项目所有路由页面的展示出口，但<router-view/>标签并不是只能写在App中，当使用了嵌套路由时，需要在一级路由文件中（如上“/admin”对应文件）使用<router-view/>标签，因为嵌套路由中的子路由页面只能在一级路的<router-view/>标签中展示，不能使用APP.vue文件的<router-view/>展示。若一级路由文件不使用<router-view/>出口标签，子路由页面跳转将不展示。

三跳转：访问嵌套路由页面方式

<router-link to="/admin/dash">跳转到子路由dash页面</router-link>

3、路由传参（两种方式）

1、query传参（推荐）

传递参数
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{
	path:'/home/message/detail',
	query:{
		id:666,
        title:'你好'
	}
}">跳转</router-link>

接收参数
$route.query.id
$route.query.title

query方式不需要在router文件中path处添加参数，更方便！！！！

2、params传参（需要在path处配置参数，不推荐）

 跳转前的搜索页面(data中声名 value变量，注意此处to前要加：)
  <input type="text" v-model="value" placeholder="请输入搜索关键词">
  <router-link :to="'/search/' + value">搜索</router-link>
或
  <router-link :to=`/search/value`>搜索</router-link>
 

 路由注册页面index.js
  // 路由path上自定义/:value参数 使用占位符声明接收params参数
	{
		path: '/search/:value',
		name: 'search',
		component:()=>import('../views/SearchView.vue'),
	},
 跳转目标页面接收参数
    查看搜索value参数{{$route.params.value}}

2、接收参数

{{$route.params.value}}

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

<router-link 
:to={
  name:"search", // 此处只可使用name属性
  params:value
}>
搜索
</router-link>

3、路由的props配置：让路由参数使用起来更简洁，省略重复代码

{
	name:'xiangqing',
	path:'detail/:id', // params传参需要占位符参数配置，query则不需要
	component:Detail,
 
	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}
 
	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

Detail组件内以porps形式接收参数
props:['id','title']

4、404页面

404页面的path为* 配置在最后面页面查找错误默认跳转404

<template>
	<div>
		<h1>404</h1>
		<p>您的页面被外星人绑架了！</p>
		<router-link to="/">回首页</router-link>
	</div>
</template>

	// 404的path为* 配置在最后面
	{
		path: "*",
		name: "nomatch",
		component: () => import('../views/NoMatch.vue')
	}

四、组件router-link

<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址，即要显示的内容。

1、to（默认是push）

to表示目标路由的链接地址。当被点击后，内部会默认立刻把 to 的值传到 router.push()并追加历史记录，所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
 
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
 
<!-- 或简写v-bind ,使用：-->
<router-link :to="'home'">Home</router-link>
 
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
 
<!-- 命名的路由 -->
配置了name的路由，一般用于简化路径，无需再拼写path路径，但必须已对象形式访问跳转
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
 
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

2、replace

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，会替换当前一条导航记录，导航后不会留下 history 记录。

<router-link :to="{ path: '/abc'}" replace></router-link>

3、append

设置 append 属性后，则在当前 (相对) 路径前添加其路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

4、tag

有时候想要 <router-link> 渲染成某种标签，例如 <li>。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

5、active-class

设置链接激活时使用的 CSS 类名。可以通过以下代码来替代。

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

注意这里 class 使用 active-class="_active"。

五、编程式路由跳转 $router

1、前进

$router.forward()
$router.go(1)

2、后退

$router.go(-1)
$router.back()

3、切换路由

$router.push('/about')

4、替换路由

$router.replace('/about')

<template>
	<div>
		<button @click="$router.back()">返回</button>
		<button @click="$router.go(-1)">返回1</button>
		<button @click="$router.forward()">前进</button>
		<button @click="$router.go(1)">前进1</button>
		<!-- 指定跳转关于页面 -->
		<button @click="$router.push('/about')">关于</button>
		<!-- 指定跳转到关于页面,不留历史记录 -->
		<button @click="$router.replace('/about')">关于-替换(不留历史记录)</button>
 
	</div>
</template>

javascript中跳转并传参写法
methods:{
  pushShow(val){
    this.$router.push({
      name:'xiangqiang',
      query:{
        id:val.id,
        title:val.title
      }
    })
  },
  replaceShow(val){
    this.$router.replace({
      name:'xiangqiang',
      query:{
        id:val.id,
        title:val.title
      }
    })
  },
},

六、路由信息 $route

路由参数 params
查询 query
地址 path
全地址 fullPath
名称 name
路由元信息（存放自定义的信息，如：访问权限、是否缓存、页面标题、滚动条...）meta

 
<template>
	<div>
		<h1>产品页面{{$route.params.id}}</h1>
		<p>查询参数:{{$route.query}}</p>
		<p>哈希值:{{$route.hash}}</p>
		<p>全地址:{{$route.fullPath}}</p>
		<p>地址:{{$route.path}}</p>
		<p>名称:{{$route.name}}</p>
		<button @click='$router.back()'>返回</button>
	</div>
</template>

七、keep-alive路由缓存

作用：<keep-alive>是 Vue 的内置组件（该标签不会渲染成DOM节点），主要是用于缓存组件的实例，避免组件重复的被创建和销毁组件，提高应用的响应速度和性能。

原理：keep-alive 是一个缓存，会标记这个虚拟节点被缓存过了，后续就不会重新初始化，也不会进行销毁。

keep-alive标签常用属性：nclude 和 exclude 用于指定需要缓存或排除的组件名称；

而 max 是用来定义组件的最大缓存个数。当然也有使用v-if与else判断是否缓存的方式。
方法一
// 指定 home 组件和 about 组件被缓存
<keep-alive :include="[home,about]">
    <router-view></router-view>
</keep-alive>
方法二
<keep-alive v-if="!!isKeep">
	<router-view/>
</keep-alive>
<router-view v-else/>

keep-alive 提供了两个钩子函数： activated 钩子和 deactivated 钩子。

activated：当组件被激活（使用）的时候触发，常用于执行一些数据初始化或者异步操作；

deactivated：当组件失活（不被使用）的时候触发；

但是在使用 keep-alive 时，要注意数据的更新问题，避免出现数据无法更新的情况。

详细讲解：对 keep-alive 的理解，使用场景以及存在的问题

八、路由守卫

作用：在进入离开页面前做拦截，处理事情（跳转提示，权限检查、页面标题、滚动条...）

1、单页面守卫（组件内路由守卫）

单页面路由守卫：配置在组件文件中，用于单个页面的鉴权。

进入前 beforeRouterEnter(to,from,next)
离开前 beforeRouterLeave
更新前 beforeRouterUpdate

to要进入的路由
from从哪个页面进入
next下一步

next()进入to页面
next(true)进入to页面
next(false)不跳转
next("/login")跳转到登录

单页面守卫使用

		写在需要使用守卫的页面
        beforeRouteLeave(to,from,next){
			// to 要去的页面
			// from 从哪个页面离开
			// next下一步(必须要执行)
			var flag = window.confirm("亲,商品价格是本年度最低价格,确定也放弃优惠吗?");
			if(flag){
				next();//进入下一页面
			}else{
				next(false);//不离开
			}
		}

单页面守卫举例：

2、独享守卫

独享路由守卫：配置在路由文件中，只有离开前一种beforeEnter守卫，无离开后守卫，用于单个页面的鉴权。

{
  path: '/charts',
  name: 'charts',
  beforeEnter:(to, from,next) => {
    console.log("独享守卫，离开前",to, from,next)
    if (to.meta.requireAuth) {
      //如果需要权限，判断
      if (localStorage.getItem("token")) {
        //如果没有token放行
        next(true);
      } else {
        //跳转到登录页面添加redirect
        next('/login?redirect' + to.path)
        document.title = to.meta.title || '默认标题' // 跳转页面后切换对应页面标题
      }
    } else {
      //直接放行
      next(true);
    }
  },
  component: () => import('@/views/EchartsView.vue')
},

3、全局守卫

全局守卫：配置在路由文件中，用于所有页面的鉴权。

全局前置：router.beforeEach((to, from, next)
全局后置：router.afterEach((to, from)
参数与单页面参数相同（全局后置只有两个参数）

全局守卫(步骤一)

//写在路由配置中 src/router/index.js
 
//希望好几个页面都需要验证是否登录
router.beforeEach((to, from, next) => {
	if (to.meta.requireAuth) {
		//如果需要权限，判断
		if (localStorage.getItem("token")) {
			//如果没有token放行
			next(true);
		} else {
			//跳转到登录页面添加redirect
			next('/login?redirect' + to.path)
		}
	} else {
		//直接放行
		next(true);
	}
})
router.afterEach((to, from) => {
	console.log(from, '离开前')
    document.title = to.meta.title || '默认标题' // 跳转页面后切换对应页面标题
})

全局守卫路由设置（步骤二）

   在需要设置全局守卫的组件页面添加meta对象属性
    {
		path: '/user', //配置的路径
		name: "user", //名称 
		meta: {
            noFooter: true, //在meta中自定义属性noFooter true
			requireAuth:true
		},
		component: () => import('../views/user/UserView.vue') //对应的组件
	},

全局守卫举例：

九、vue的scrollBehavior（滚动行为）、缓存之前的位置

1、vue-router方法scrollBehavior（推荐）

const scrollBehavior = function scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    // savedPosition 会在你使用浏览器前进或后退按钮时候生效
    // savedPosition: 会记录滚动条的坐标，点击"后退/前进" 时的记录值(x:?,y:?)
    return savedPosition;
  }else {
      return { x: 0, y: 0 }; // 期望滚动的位置
   }
};
const router = new Router({
  routes,
  scrollBehavior,
});

2、使用路由守卫

原理就是在beforRouterLeave的路由钩子记录当前页面滚动位置

//在页面离开时记录滚动位置,这里的this.scrollTop可以保存在vuex的state或者浏览器本地
beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    next()
  },
 
//进入该页面时，用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {
    next(vm => {
      document.body.scrollTop = vm.scrollTop
    })
  },

这里的this.scrollTop可以保存在vuex的state或者浏览器本地

3、使用<keep-alive> 缓存，即不销毁列表页

APP.js中

<template>
  <div id="app">
    <!-- <router-view/> -->
    <keep-alive>
        <router-view v-if="isKeep"></router-view>
    </keep-alive>
    <router-view v-if="!isKeep" />
  </div>
</template>
提示：此处路由信息可写为计算属性来用，编写更简洁
computed: {
  isKeep(){
    return this.$route.meta.keepAlive
  }
},

router.js中

 routes: [
    {
      path: '/',
      name: 'List',
      //component: List
      component: () => import('./views/index/list.vue'),
      meta: {
        keepAlive: true // 需要缓存
      }
    },
    {
      path: '/content/:contentId',
      name: 'content',
      component: () => import('./views/index/content.vue'),
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
]

使用场景：详情页面不需要缓存，列表页面需要缓存

详细讲解：

关于vue的scrollBehavior（滚动行为）、缓存之前的位置

vue-router滚动行为_vue-router scrollbehavior