在路由/test/1中,$route.params的值为 { "id": "1" } 使用一个通配符时,$route.params内会自动添加一个名为pathMatch参数。它包含了 URL 通过通配符被匹配的部分: // 给出一个路由 { path: '/user-*' }this.$router.push('/user-admin')this.$route.params.pathMatch // 'admin'// 给出一个路...
$router指的是router实例,$route则是当前激活的路由信息对象,是只读属性,不可更改,但是可以watch(监听)。 在浏览器中分别打印出$router 和 $route $router: 属性: $router.app :配置了router的Vue根实例 $router.mode:路由模式,这里是hash $router.currentRoute:当前路由的路由信息对象,包含了当前匹配路由的信息 ...
data: {currentRoute:window.location.hash,navs:Object.freeze(routes) }, computed: { currentComponent:function() { constcom =this.navs.filter(item=>'#/'+ item.url===this.currentRoute)[0]; if(com && com.component) { document.title= com.title; returncom.name; } return'not-found'; } ...
route对象代表当前激活的路由,包含了当前路径、参数、查询字符串等详细信息。开发者可以通过访问this.$route(在组件内部)或router.currentRoute(在路由实例中)来获取route对象。以下是route对象的主要属性: path:当前路由的路径。 params:路径参数,例如:/user/:id中的id。 query:查询参数,例如:/search?q=vue中的q。
{ // redirect: router.currentRoute.fullPath, }, }); }, 1000); break; // 404请求不存在 case 404: message.error('网络请求不存在', 1.5); break; // 其他错误,直接抛出错误提示 default: message.error(error.response.data.message, 1.5); } return Promise.reject(error.response); } } ); ...
'$route': { // 必须,解决路由同步加载组件时,$watch首次不执行的问题 immediate: true, handler (to) { if (to.matched[0]) { this.currentRoute = to.matched[0].name } } } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. sidebar编写 ...
=== currentRoute.matched.length - 1 && isSameRouteLocationParams(currentRoute.params...
当前路由信息(currentRoute):当前所处的路径的一些数据信息: 匹配到的路由(matched):传入当前路由,通过 matcher 来匹配到的一个或者多个路由信息,拿到匹配到的路由,我们就可以渲染其对应的组件: 路由匹配器(RouteRecordMatcher):它是一个对象,他主要维护一个正则语句和与其匹配的路由信息(recode)。
function match(raw, currentRoute, redirectedFrom){ const location = normalizeLocation(raw, currentRoute, false, router) const { name } = location if (name) { // name 的情况 ... } else if (location.path) { // path 的情况 ... ...
$route其实对应着就是一个普通的对象,这个对象就保存了当前的路由地址,等等等等一系列信息,所以为了将来能够注入这两个对象,我这里单独写一个类来存储这两个对象相关的信息。 代码实现 class NueRouterInfo { constructor() { this.currentPath = null; ...