路由跳转两种方式

编程式导航-js跳转

$router.push,出了push还有replace,go,back

声明式导航-标签跳转

<router-link to=‘/path‘ replace>

动态路由

定义：不同的地址呈现相同的页面，且基础路径一致

语法

/path/:name

获取动态路由里的参数

$route.params

嵌套路由定义

一组拥有相同的基础路径的独立路由【页面】。

语法

{
  path:‘/base‘,
  // 子路由在Base组件的router-view中显示
  component:Base,
  children:[
    {//子路由路径中不加/程序自动拼接
      path:‘a‘,component:A
    },
    {
      path:‘b‘,component:B
    },
  ]
}

路由传参

params

1.必须使用命名路由的name跳转 2.优先使用动态路由-显式的params 3.隐式的params刷新页面，数据会丢【不推荐】

显式

动态路由传参叫显示的params传参，且必须使用路由命名name属性跳转，不可以使用path，使用params对象传递参数

隐式

静态路由使用params传参，地址栏不会带参数，所以刷新页面数据会丢，一般不使用。

query

使用query传参，地址栏以get请求传参的形式表现。他没有动态路由好看

跳转传参-获取参数

使用$router跳转传参 使用$route获取参数

redirect 重定向

由程序控制用户的访问地址，重新跳转指定地址，叫重定向。

用于

容错页404，505等。 新旧网址迭代。

语法

{
  path:‘/not_path‘,
  redirect: "/404"
}

alias别名

给路由取别名，使不同的地址加载同一个页面：地址栏不变化。

alias和redirect对比

alias地址栏不变化 redirect跳转到指定的路径

元信息meta

是一种路由配置里的传参方式，一般用与路由权限。

滚动事件 scrollBehavior

用于设置路由里的滚动条位置，及保存滚动条位置信息 里面有三个参数：to,from,savedPosition

路由守卫

定义

路由的生命周期，拦截函数，用于权限控制。 参数： to:即将要进入的下一个路由 from: 当前的路由，要离开的路由，从哪来 next函数必须要调用，它控制路由是否可以进入，默认参数true，如果传入false则阻止路由跳转

全局守卫

前置守卫 beforeEach

• 定义：将要进入路由前的守卫。
• 作用：权限控制是否可以访问。

后置守卫 afterEach

• 定义：进入路由后的守卫。
• 作用：日志记录，数据获取。
• 注意：没有next

组件守卫

更新守卫

beforeRouterUpdate

• 当路由重复使用同一个组件的时候，使用beforeRouterUpdate函数获取地址参数

离开守卫

beforeRouterLeave

• 用于表单填写页面，当用户离开时对用户进行提示，控制路由是否跳转。