vue Route参数传递和导航守卫

技术2026-01-13 9

路由的传递参数

对于params方式的传递参数，我们已经讲过。现在我们来使用第二种参数方式来进行练习：

新建Profile.vue组件

<template> <div> <h3>通过query来获取参数数据</h3> <h5> {{$route.query}} </h5> </div> </template> <script> export default { name: 'profile', data(){ } } </script> <style scoped> </style>

去route的index.js中添加路径

import Vue from 'vue' import VueRouter from 'vue-router' // import Home from '../components/HelloWorld.vue' // import about from '../components/about.vue' // import user from '../components/test.vue' //先使用 vue的uuse来使用vueroute Vue.use(VueRouter) //定义route路由 const routes = [ { path: '/', name:'first', redirect: '/pagehome' }, { path: '/profile', component: () => import('../components/Profile.vue') }, { path: '/pagehome', name: '首页', component: () => import('../components/HelloWorld.vue') }, // { // path: '/about', // name: 'About', // // route level code-splitting // // this generates a separate chunk (about.[hash].js) for this route // // which is lazy-loaded when the route is visited. // 路由懒加载 // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') // } { path: '/about', name: '关于', component: () => import('../components/about.vue'), children:[ { path: 'aboutSub', component: () => import ('../components/test2.vue') } ] }, { path: '/user/:userId', component: () => import('../components/test.vue') } ] //history模式就是我们学的history的go，reward。pushState。replaceState啊等。 const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, activeClass: 'changecolor' }) //导出route组件 export default router

添加routelink

<template> <div id="app"> <div id="nav">        <router-link :to="{ path: '/profile', query:{ name: '里巴巴' ,age: 22 ,sex: 1 } }">个人信息</router-link> </div> <router-view/> </div> </template> <script> export default { name: 'App' ,data(){ return { userid: 'zhangsan1' } } } </script> <style> .changecolor{ color:red; } </style>

运行效果

$R o u t e 和 R o u t e r 的区别$

$R o u t e 是处于活跃的路由， R o u t e r 是 v u e 使用的模块。具体还得网上找文章对源码进行分析$

导航守卫

俗称：对来回跳转过程进行监听。就是监听用户点击什么路径，从A跳到B。

案例点击组件，浏览器需要更新对应页面标题

重点在于代码末尾的 - -使用全局导航守卫。

路由对象中name和meta可以两个选一个，在这里，我选route的name属性。

import Vue from 'vue' import VueRouter from 'vue-router' // import Home from '../components/HelloWorld.vue' // import about from '../components/about.vue' // import user from '../components/test.vue' //先使用 vue的uuse来使用vueroute Vue.use(VueRouter) //定义route路由 const routes = [ { path: '/', redirect: '/pagehome' }, { path: '/profile', name: '个人简介', component: () => import('../components/Profile.vue') ,meta: { title: '个人简介' } }, { path: '/pagehome', name: '首页', component: () => import('../components/HelloWorld.vue') ,meta: { title: '首页' } }, // { // path: '/about', // name: 'About', // // route level code-splitting // // this generates a separate chunk (about.[hash].js) for this route // // which is lazy-loaded when the route is visited. // 路由懒加载 // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') // } { path: '/about', name: '关于', component: () => import('../components/about.vue'), meta: { title: '关于' }, children:[ { path: 'aboutSub', component: () => import ('../components/test2.vue') ,meta: { title: '关于的子组件' } } ] }, { path: '/user/:userId', name: '个人中心', component: () => import('../components/test.vue') ,meta: { title: '个人中心' } } ] //history模式就是我们学的history的go，reward。pushState。replaceState啊等。 const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, activeClass: 'changecolor' }) //使用全局导航守卫 router.beforeEach((to,from,next)=>{ document.title = to.name; next() }) //导出route组件 export default router

运行结果如下：

方法2：使用match的数组对象来进行改变值：

//使用全局导航守卫 router.beforeEach((to,from,next)=>{ // document.title = to.name; //使用方法2，从匹配对象中进行获取其标题值 document.title = to.matched[0].meta.title; next() })

运行效果同上。

导航守卫可以配置类似拦截器的功能。可以使用前置钩子函数和后置钩子函数进行登入或者权限校验的判断。

使用keep-alive对组件不进行销毁，下面假设先不使用keep-alive进行查看情况，看组件会不会销毁：

可以看到，当点击其他route时，组件会被销毁。

在加入keep-alive后，app.vue代码如下：

<template> <div id="app"> <div id="nav">        <router-link :to="{ path: '/profile', query:{ name: '里巴巴' ,age: 22 ,sex: 1 } }">个人信息</router-link> </div> <keep-alive> <router-view/> </keep-alive> </div> </template> <script> export default { name: 'App' ,data(){ return { userid: 'zhangsan1' } } } </script> <style> .changecolor{ color:red; } </style>

运行效果如下：

可以看到，首页组件保持了活跃状态。

keep-alive常用属性：

指定一些组件不缓存或者缓存，使用：

修改profile组件代码：

<template> <div> <h3>通过query来获取参数数据</h3> <h5> {{$route.query}} </h5> </div> </template> <script> export default { name: 'profile' ,beforeCreate () { console.log("proifle被创建") } ,beforeDestroy () { console.log("profile组件被销毁") } } </script> <style scoped> </style>

修改app.vue

<template> <div id="app"> <div id="nav">        <router-link :to="{ path: '/profile', query:{ name: '里巴巴' ,age: 22 ,sex: 1 } }">个人信息</router-link> </div> <keep-alive exclude="profile"> <router-view/> </keep-alive> </div> </template> <script> export default { name: 'App' ,data(){ return { userid: 'zhangsan1' } } } </script> <style> .changecolor{ color:red; } </style>

运行：

可以看到，虽然我们使用了keep-alive,但是已经将profile组件排除在外了，不对此组件进行缓存。

Processed: 0.017, SQL: 9

vue Route参数传递和导航守卫

路由的传递参数

R o u t e 和 R o u t e r 的 区 别 Route和Router的区别 Route和Router的区别

导航守卫

$R o u t e 和 R o u t e r 的区别$