![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue-Router
Mr.LuRen
前端小菜一枚、、、
展开
-
1-动态路由
动态路由匹配动态路径参数使用冒号 : 标记把某种模式匹配到的所有路由,全都映射到同个组件可以在路由 path 选项中使用const User = { template: '<div>User</div>' }const router = new VueRouter({ routes: [{ path: '/user/:id', /* 动态路径参数 以冒...原创 2019-01-20 18:55:22 · 264 阅读 · 0 评论 -
10-路由元信息
路由元信息: 定义路由的时候可以配置 meta 字段 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', com...原创 2019-01-20 19:47:52 · 178 阅读 · 0 评论 -
8-守卫导航 or 路由钩子函数
导航守卫:表示路由正在发生改变( 路由导航分为:全局的, 单个路由独享的, 或者组件级的 )通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内路由钩子每个守卫方法接收三个参数: to: 要进入的目标路由对象 from: 要离开的路由 next(): 调用该方法 resolve 。执行效果依赖 next 方法的调用参数。 如...原创 2019-01-20 19:46:05 · 179 阅读 · 0 评论 -
7-HTML5 History 模式
HTML5 History 模式history 模式: 利用 history.pushState API 来完成 URL 跳转而无须重新加载页面( 去除 # ) const router = new VueRouter({ mode: 'history', routes: [...] })mode type: string ( 默认: "hash" (浏览器环境)...原创 2019-01-20 19:41:10 · 188 阅读 · 0 评论 -
6-路由组件传参 or props 解耦
路由组件传参使用 $route 会组件与其对应路由形成高度耦合,使组件只能在特定的 URL 上使用,不灵活路由组件设置 props保持 props 函数为无状态的,因为它只在路由发生变化时起作用如果需要状态来定义 props,需使用包装组件,这样 Vue 才可以对状态变化做出反应使用 props 将组件和路由解耦 const User = { props: ['id'], ...原创 2019-01-20 19:39:44 · 1388 阅读 · 1 评论 -
5-重定向和别名
重定向: 通过 routes 配置来完成 const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })重定向的目标可以是命名路由 const router = new VueRouter({ routes: [ { path: '/a', re...原创 2019-01-20 19:37:03 · 201 阅读 · 0 评论 -
4-命名视图
命名视图同时 (同级) 展示多个视图,而不是嵌套展示,如果 router-view 没有设置名字,那么默认为 default <'router-view class="view one"></router-view'> <'router-view class="view two" name="a"></router-view'>原创 2019-01-20 19:35:36 · 528 阅读 · 0 评论 -
3-编程式导航 & 命名路由
编程式的导航借助 router 的实例方法,通过编写代码来实现router.push() router.push( location, onComplete?, onAbort? ) 导航到不同的 URL,向 history 栈添加新记录,点击后退按钮,回到之前 URL 点击 <router-link :to="..."> 等同于调用 router.push(...)...原创 2019-01-20 19:31:44 · 196 阅读 · 0 评论 -
2-嵌套路由
嵌套路由URL 中各段动态路径也按某种结构对应嵌套的各层组件被渲染组件同样可以包含自己的嵌套 const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router...原创 2019-01-20 19:24:03 · 156 阅读 · 0 评论 -
11-过度动效
过渡动效<router-view’> 是基本的动态组件,所以我们可以用 组件给它添加一些过渡效果 <transition> <router-view></router-view> </transition>单个路由的过渡: 可以在各路由组件内使用 并设置不同的 name const Foo = { t...原创 2019-01-20 19:49:10 · 125 阅读 · 0 评论