大白话攻破VueRouter重点知识

刺骨的言语ヽ痛彻心扉 2022-09-09 12:50 227阅读 0赞

> https://router.vuejs.org/zh/ vue router 官方文档  
> wx：前端周计划

官方文档里讲了很多很细，但是很多并不便于理解。这里把vue router 分为几个重点来总体概述一下。通过简单的语言来理解文档中所描述的概念。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_16_color_FFFFFF_t_70_g_se_x_16]

### 动态路由的分配 ###

其下有三个重要的点，分别是 动态路径参数，通配符和匹配优先级

#### 动态路径参数 ####

> id即是一个动态路径参数

path:'/user/:id'

场景可以想象为 ：  
不同用户进入同一个页面，携带的用户id不同  
而且这个参数 会存储在$route.params里面

#### 通配符 ####

> 符合某些条件的路由匹配

path:'*'
    path:'user-*'    
    匹配开头为 user-的路由
    要声明的是通配符的路由应该放在最后

#### 匹配优先级 ####

> 匹配优先级则是 路由定义的越早 优先级越高

### 嵌套路由 ###

> chidren属性中设置嵌套路由

### 命名路由 ###

> name属性是命名路由的核心，即给路由设置上姓名

则 某些操作可以直接进行路由定位  
比如

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
    或者
    router.push({  name: 'user', params: {  userId: 123 } })

这两种方式都会按照name 去导航路由的路径

### 命名视图 ###

> 只有在一个页面下有多个视口的情况下才需要命名视图来区分。

<router-view ></router-view>
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
    
    const router= new VueRouter({ 
    routes:[
    { 
    path:'/',
    components:{    //此处需要用复数
    default:Default,
    a:Amodel,
    b:Bmodel
    }

而一个视口需要对应一个组件 所以在路由定义处需要有多个components来对应。

### 重定向和别名 ###

redirect:'/b'       
    当访问某路径时会将其重新跳转到b
    
    alias:'/b'        
    别名的原理则是  
    a的别名是b则 访问b时等同于路由a但是路径仍然显示b

### 路由组件的传参 ###

#### 第一种$route的方式 ####

> 常规方式是利用之前所说的动态路径参数进行传参  
> 缺点是 增大组件与路由的耦合性  
> 也就是说在不带特定参数的路径下则无法正常渲染组件

const User={ 
    template:'<div>User{ { $router.params.id }}</div>'
    }
    const router =new VueRouter({ 
    routes:[{ path:'/user/:id',component:User}]
    }
    )

#### 第二种props的方式 ####

> 优势在于解耦且可以传输复杂数据 props的true or false 代表了 是否接收键值

const User ={ 
    props：['id'],
    template:'<div>User{ {id}}</div>'
    }
    
    const router =new VueRouter({ 
    router:[
    { path:'/user/:id',component:User,props:true},
    
    包含命名视图的路由
    必须分别为每个命名视图增加props选项
    
    { 
    path:'/user/:id',
    components:{ default:User,b:bUser},
    props:{ default:true,sidebar:false}
    }]
    })

#### 需要特别说一下函数模式的props ####

> 传参方式为 /search?q=vue  
> 则匹配到 search对应的路由下 query为最新的键名  
> 而route.query.q将被设置为键值  
> 所以传参的形式 将是 \{ query :‘vue’ \}

const router =new VueRouter({ 
    routes:[
    { 
    path:'/search',
    component:SearchUser,
    props:route=>({  query : route.query.q })
    }
    ]
    })

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/10f33307015f422cb1ca5af479b657a0.png