又惊又喜的一天

一、vue-router  路由

 组件    <router-link>

 

切换路由     to="/user

 

切换路由的地址

 

 

<router-link :to="{'name':'about'}">关于</router-link>

<router-link :to="{path:'/product/def',query:{age:18},hash:'best'}">产品</router-link>

   存放路由  <router-view>

 

二、 路由配置   /router/index

01 普通

{

  path:"/user",

  name:"user",

  component:()=>import(xxx)

}

 

02 传参 

{

path:"product/:id",

name:"product",

component:xxx

}

<router-link to="/product/abc">     

   在页面中获取      $route.params.id

 03  404

 他要配置在最后面

   

 

{

path:"*"

}

04   编程式路由跳转          $router   

前进

$router.forward()

$router.go(1)

后退

$router.back()

$router.go(-1)

切换路由

$router.push("/about)

替换路由(不留页面历史记录)

$router.replace("/about"）

 

05   路由信息    $route

路由参数    params

查询           query

地址           path

全地址       fullPath

名称           name

哈希值       hash

 三、路由守卫

作用：进入离开页面前做拦截，处理事情(跳转提示，权限检查)

 

1.组件内部：

进入前      beforeRouterEnter(to,from,next)

 

to 要进入的路由

from 从哪个页面进入

next 下一步

next() 进入to页面

next（true） 进入to页面

next(false)不跳转

next("/login")跳转到登录

  离开前       beforeRouterleave

  更新前       beforeRouterUpdate                  

 

2. 全局

beforeEach((to,from,next)=>{})

afterEach

3.    独享    beforeEnter()

四、 路由元信息

 {path:path,name,component,   meta:{noFooter:true}

 $router.meta.noFooter范围

 五、路由查询参数：

传递

 

next("//login?redirect=/cart")

获取

 

 

var redirect=this.$route.query.r