vue 路由进阶-CSDN博客

vue 路由进阶

路由可向路由匹配的组件传递参数，不同情况向组件传递不同的参数，从而实现组件的复用。

路由向组件传递参数

和路由匹配的组件可以在组件中使用 $route 获取路由上的参数：

传参方式

:、params和query

`:`在路径传递参数

{
	path: "/argu/:id/book",
	name: "argu",
	component: () => import("@/views/ArguPage")
}
复制代码

路径中的一部分是参数，必须传递该参数：

<!--路径跳转-->
<router-link to="/argu/123/book">path跳转</router-link>
<!--路由名跳转-->
<router-link :to="{name:'argu',params:{id:'test'}}" tag="button">name+params跳转</router-link>
<!--获取参数-->
<h1>{{$route.params.id}}</h1><!--params的名字路径中的的参数名一致-->
复制代码

此时 path+ parmas传递参数，params会被忽略。

`params`+`name`传递参数

路由：

{
	path: "/argu",
	name: "argu",
	component: () => import("@/views/ArguPage")
}
复制代码

跳转方式是 name+params+（query），通过path跳转，params 会被忽略。

<router-link :to="{name:'argu', params:{name:'hangge'}}">
  跳转到 hello
</router-link>
// path + params ，params 会被忽略，因为路径中没有定义参数
<router-link :to="{path:'/argu', params:{name:'hangge'}}">
  跳转到 hello
</router-link>
复制代码

query 参数

query 参数参数，表现为查询字符串，和localtion.serach一样的。

不需要先在路径中先定义，可通过path、path+query 或者 name + query 传递参数。

<router-link to="/argu?queryName=value">跳转到 hello</router-link>
<router-link :to="{path:'/argu',query:{queryName:value}}">跳转到 argu</router-link>
<router-link :to="{name:'argu',query:{queryName:value}}">跳转到 argu</router-link>
<h1>{{ $route.query.queryName }}</h1>
复制代码

函数传递 query

// 主要是  $router 不是 $route
go() {
	this.$router.push({
		name: 'argu',
		query: {
				queryName: "你好"
			}
		})
	}
}
复制代码

但是这样使得 $route 和组件耦合在一起，不方便组件的复用，如果能将路由中的参数传递到组件的props 就好了，恰恰是可以这样设置的。

props 接收路由的 `params`

路由传参数的三种方式：

布尔模式

{
    path: '/user/:id', 
    component: User, 
    props: true //表明 将 id 作为 proos 传递到匹配的组件 User 中。
}
复制代码

User 中定义 props 接收 id:

export default {
	props:{
		id:{
			type:String,
			default:'jackzhou'//默认值
		}
	}
}
复制代码

对象模式

将路由的 props 属性设置一个对象，也可在组件中获取到该值，这种方式往往用于传递静态值，即 name 值不会变化。

路由对象：

{
	name: 'home',
	alias:'/home_page',
	path: '/',
	props:{name:'jack jack'},
	component: Home
}
复制代码

Home 组件：

props:{
	name:{
		type:String,
	}
}
复制代码

函数模式

以上两种方式，params 参数的名字必须和组件中的props 属性名字相同，如果想对 params 进行改造后传递到组件，就可将 props 设置成函数，在函数内获取路由中的 params 或者 query，或者其他属性值，对其进行处理后再传递给组件。

注意：这种方式函数必须返回一个对象。

路由：

{
	name: 'about',
	path: '/about/:years', //params 有一个参数 years
	props:(route) {
  		const now = new Date()
  		return {
		// 将 years 改造成 name
    	name: (now.getFullYear() + parseInt(route.params.years)) + '!'
        }
	    },
	component: () => import('@/views/AboutPage'),
}
复制代码

组件中的 props:

props: {
	name: {
		type: String
	}
}
复制代码

命名视图的路由，要为每个命名视图添加 props：

{
	path:'/name/:view',
	name:'name_view',
	components:{
		default:()=>import('@/views/ChildPage'),
		sister:()=>import('@/views/SisterPage'),
		brother:()=>import('@/views/BrotherPage'),
	},
	props:{
        default:true,
        sister:false,
        brother:(route)=>({view:route.params.view.toUpperCase()})
    }
}
复制代码

完整的例子

{% raw %}

See the Pen route 的 params 传递组件 by JackZhouMine (@JackZhouMine) on CodePen.

{% endraw %}

HTML5 History 模式

路由配置里有一个属性 mode ，默认值是 hash，以hash来模拟一个url，url改变时，页面不会重新加载。

先使用普通模式，可将 mode 设置成 history，这种模式会使用 history.pushSate 来完成url跳转而页面不会重新加载。这种模式需要服务器设置一下。

使用 history 模式，因为web应用往往是单页应用，当用户访问一个不存在的路径时，需要提供一个后备页面。

在路由配置的最后增加一个404路由：

{
	path:'*',
	component:NotFoundPage// 前面没有匹配的路由，最后会匹配该路由。
}
复制代码

meta 元信息

可在路由对象中配置 meta 属性，meta 是一个对象。

比如，根据不同页面显示不同的 title。

{
	name: "about",
	path: "/about",
	meta: {
		title: "关于"
	},
   	component: () => import("@/views/AboutPage")	
}
复制代码

在路由配置文件中，设置各个页面的 title：

const router= new Router({
    routes
})
router.beforeEach((to,from,next)=>{
    //setTitle 函数用于设置页面标题
	to.meta&&setTitle(to.meta.title) //这是简化if语句的简写
	console.table(to)
	console.table(from)
	next()
})
export default router
复制代码

导航守卫

全局守卫

全局前置守卫

const router = new Router({
    {
        path:"/",
        name:"heom_page"
        component:Home,
        //路由独享守卫
        beforeEnter:(to,from,next)=>{
            //处理逻辑
            next()
        }
    }
})
//每次路由进入都会调用
router.beforeEach((to,from,next)=>{
    //处理逻辑，比如登录判断，可跳转到任意页面
    //不要忘记调用 next，不调用 next，页面不会跳转
})
复制代码

后置钩子

//路由跳转之后做一些操作，比如去掉登录样式
router.afterEach((to,form)=>{
    //逻辑处理
})
复制代码

路由独享守卫只在匹配某个路由时执行。
组件内守卫

beforeRouteEnter, 组件创建之前调用，组件不具备this； beforeRouteUpdate，路由更新，而组件被复用时调用，可使用this； beforeRouteLeave，离开路由时调用，可使用this。

export default{
    name:'Home',
    data(){
        return {}
    },
	/**
	* 组件内路由守卫
	* 1. 该函数在路由进入时执行
	* 2. 此时 组件还未渲染，不可用 this,当可在  next 中用 vm
	* 3. next 晚于 mounted 执行，next 之前的代码，早于beforeCreate 	  *	   执行
	* 4. 最后需要调用 next 使得路由跳转
	*/
	beforeRouteEnter(to, from, next) {
		console.log("①，home 组件内路由守卫，beforeRouteEnter");
		// next 晚于 mounted 执行，next 之前的代码，早于beforeCreate 执行
		next((vm)=>{
			console.log('vm')
			console.log(vm)//有值
			console.log('this')
			console.log(this)// undefined
			console.log('②，home 组件内路由守卫，beforeRouteEnter');
		});
	},
	/**
	* 组件内路由守卫
	* 1. 该函数在路由离开时执行,最先调用,然后在调用全局守卫，再调用		*	 beforeDestroy
	* 2. 此时，该路由守卫所在组件已渲染，可用 this
	* 3. 最后需要调用 next 使得路由跳转
	 */
	beforeRouteLeave(to, from, next) {
		console.log("①，home 组件内路由守卫，beforeRouteLeave");
		let leave = confirm("你确定要离开 home 页吗？");
		if (leave) {
		// console.log(to.name, from.name);
		// console.log(this);
		next(() => {
			console.log('②，home 组件内路由守卫，beforeRouteLeave');
			}); //给 next 传递 false ,路由不会跳转
		} else {
			next(false);
		}
	},
	/*
	* 当路由发生变化，而组件被复用时调用
	* 1. 此时该复用组件已被渲染，可用 this
	* 2. 需要调用 next，组件才能渲染
	*/
	beforeRouteUpdate(to, from, next) {
		console.log('①，argu，组件内路由守卫，beforeRouteUpdate');
		next(() => {
			console.log('next，argu，组件内路由守卫，beforeRouteUpdate');
		});
	},
	beforeCreate() {
		console.log('beforeCreate')
	},
	created() {
		console.log('created')
	},
	beforeMount() {
		console.log('beforeMount')
	},
	mounted() {
		console.log('mounted')
	},
	beforeUpdate() {
		console.log('beforeUpdate')
	},
	updated() {
		console.log('updated')
	},
	beforeDestroy() {
		console.log('beforeDestroy')
	},
	destroyed() {
		console.log('destroyed')
	}
}
复制代码

路由全过程：

导航被触发
离开页面（失活的组件）里调用离开守卫 beforeRouteLeave
调用全局前置守卫 beforeEach
在重用的组件里调用 beforeRouteUpdate (非重用组件，没有这个步骤)
调用路由独享守卫 beforeEnter
解析异步路由组件
在进入页面（激活组件）调用 beforeRouteEnter
调用全局解析守卫 beforeResolve （导航被确认之前，组件内守卫和异步路由组件被解析之后，调用 beforeResolve）
导航被确认（什么时候被确认，全部钩子执行完了，是被确认的）
调用全局后置守卫 afterEach
触发 DOM 更新
在 vue 实例中（此时页面解析完毕了吗？是的）调用 beforeRouterEnter 守卫里传给 next 的回调。next在mounted之后被调用。

过渡效果

可以给路由匹配的组件设置过渡效果，让页面平滑地显示，提升用户体验。需要用到 transition 标签，如果有多个视图需要过渡，则用 transition-group。

<transition-group name='router-view'>
<!-- 视图渲染组件,该组件内不需要房子任何内容，可写成只闭合标签-->
	<router-view  key='default'/>
	<!-- 有多个路由视图需要匹配，则用命名视图 -->
	<router-view key='sister' name="sister"></router-view>
	<router-view key='brother' name="brother"></router-view>
</transition-group>
复制代码

css 过渡效果：

	.router-view-enter{
		opacity: 0;
	}
	.router-view-enter-active{
		transition: opacity 1s ease;
	}

	.router-view-enter-to{
		opacity: 1;
	}
	.router-view-leave{
		opacity: 1;
	}
	.router-view-leave-active{
		transition: opacity 1s ease;
	}

	.router-view-leave-to{
		opacity: 0;
	}
复制代码

这些设置，每个页面的效果都是一样的，要为不同的页面设置不同的效果，可用路由传递相应的参数来，让动态绑定到 transition 的 name 属性上。

或者监听路由变化：

watch: {
	'$route'(to){
		console.log(to);
		to.params&&to.params.view&&(this.effect = to.params.view)
	},
}
复制代码

参考

Vue.js - 路由 vue-router 的使用详解2（参数传递）

vue 路由进阶