routes: [ { path: '/', redirect: '/home', }, { path: '/index/home', component: () => import('../views/index/Home.vue'), }, { path: '/home', component: () => import('../views/home/Index.vue'), }, { path: '/me', component: () => import('../views/me/Index.v...
当我们使用元素查看器,查看DOM结构的时候回发现,当我们点击到某个按钮时,该按钮会添加两个默认的样式: router-link-exact-active:表示当前链接被严格匹配 router-link-active:表示当前链接被激活 所以,我们可以利用这两个类名对当前激活链接和严格匹配链接进行样式设置。 路由重定向 在上面的例子中,当我们点击导航按钮...
上面我们定义的路由,都是严格匹配的: 只有router-link 中的to属性和 js 中一条路由route中 path 一模一样, 才能显示相应的组件component. 但有时现实却不是这样的, 例如: 如下的需求: 当我们访问网站并登录成功后,它会显示 " 欢迎你,+ 你的名字" 。 不同的用户登录, 只是显示“你的名字” 部分不同,其它...
动态路由 上面我们定义的路由,都是严格匹配的,只有router-link 中的to属性和 router.js 中的路由route中 path 一模一样,才能显示相应的组件component. 但有时现实却不是这样的,当我们去访问网站并登录成功后,它会显示 欢迎你,+ 你的名字。不同的用户登录, 只是显示“你的名字” 部分不同,其它部分是一样的。
上面我们定义的路由,都是严格匹配的,只有router-link 中的to属性和 router.js 中的路由route中 path 一模一样,才能显示相应的组件component. 但有时现实却不是这样的,当我们去访问网站并登录成功后,它会显示 欢迎你,+ 你的名字。不同的用户登录, 只是显示“你的名字” 部分不同,其它部分是一样的。
mode:'history',// 路由跳转时选中的样式linkActiveClass:'active-link',//严格匹配 路由路径 只有完全正确才会显示对应样式linkExactActiveClass:'exact-active-link',// 浏览器滚动位置的定义 to 要去的页面 from 来自的页面 savedPosition 滚动的位置// 可以实现 页面跳转之后 回来还在调走之前的滚动位置这一功...
可以看出 router-link 组件就是在其点击的时候根据设置的 to 的值去调用 router 的 push 或者 replace 来更新路由的,同时呢,会检查自身是否和当前路由匹配(严格匹配和包含匹配)来决定自身的 activeClass 是否添加。 10- 小结 整个流程的代码到这里已经分析的差不多了,再来回顾下: ...
exact:用于控制当前激活项的匹配行为(严格匹配或者贪婪匹配)。 append:控制相对链接路径的追加方式。 replace:替代而不是作为历史条目压榨你。 active-class:当前链接项激活时增加的css样式。 例如: Active Links<router-linkto="/">/</router-link><router-linkto="/"exact>/ (exact match)</router-link><router...
可以看出 router-link 组件就是在其点击的时候根据设置的 to 的值去调用 router 的 push 或者 replace 来更新路由的,同时呢,会检查自身是否和当前路由匹配(严格匹配和包含匹配)来决定自身的 activeClass 是否添加。 10- 小结 整个流程的代码到这里已经分析的差不多了,再来回顾下: ...
上面我们定义的路由,都是严格匹配的,只有router-link 中的to属性和 js 中一条路由route中 path 一模一样,才能显示相应的组件component. 但有时现实却不是这样的,当我们去访问网站并登录成功后,它会显示 欢迎你,+ 你的名字。不同的用户登录, 只是显示“你的名字” 部分不同,其它部分是一样的。这就表示,它是...