Vue 路由（四）

$route指当前路由,$router指全局路由器
1.在router的index文件中配置路由时，有两种引入组件的方式

• {path: '/',name: 'Home', component: Home}其中Home是实现由import引入好的
• {path: '/',name: 'Home',component: () =>{'../views/Home.vue'}}

上述两种引用的区别在于第一种引用会将所有的路由文件打包，而第二种相当与懒加载，只有用到的才会被打包

2.vue-router中默认使用的是hash模式，也就是会出现URL: localhost:8080/#/URL中带有#号

• Hash: 使用URL的hash值来作为路由，用来指导浏览器动作的，对服务器完全无用，支持所有浏览器
• History: 以来HTML5 Histroy API和服务器配置
• Abstract: 支持所有js运行模式，如果发现没有浏览器的API，路由会自动强制进入该模式

3.子路由
在router的index的文件中配置路由组件时可以给一个路由组件设置子路由组件

{
  path: '/user',
  name: 'User',
  children: [
    //user
    {
      path: '',
      component: MyOrder
    },
    // user/order
    {
      path:'order',
      component: MyOrder
    }, 
    //user/setting
    {
      path: 'setting',
      component: MySetting
    }
  ],
  component: User
}

上述代码为配置时代码，当要使用时

<router-link to="/user/order">我的订单</router-link>

注意：在路由中使用子路由时，在填写路径时需要补全完整路径，父路由配置是to='/user'，父路由中配置子路由时to='/user/order'

4.动态路由和参数传递
当传递单个参数时
配置子路由时传递参数

{
    path: 'page/:id',
    component: MyPage
}

上述代码中id为自定义的接收参数的变量，前面要使用:
在路由组件中获取传递的参数：

<div>
    ID: {{`$`route.params.id}}
    ID: {{pageId}}
</div>
export default {
    computed: {
        pageId() {
            return this.$route.params.id
        }
    }
}

传递单个参数时使用上述方法，即params传递参数

当传递多个参数时
配置子路由时传递参数：

{
    path: 'page',
    component: MyPage
}

和配置不传递参数的子路由相似

如何传递参数：

<li><router-link to="/user/article?name=张辉&age=10">文章一</router-link></li>
<li><router-link :to="{path: '/user/article',query:{name: '张辉', age: 100}}">文章二</router-link></li>

上述代码中的两种方法实现效果类似，但是跟推荐使用第二种，因为调理更加清晰

接收传递的参数：

<div>
     name: {{`$`route.query.name}}
     age: {{`$`route.query.age}}
</div>

显而易见，使用query方式传递参数要更好

5.重定向和别名
使用redirect进行重定向
使用alias来进行别名设置

6.对参数进行解耦
在定义路由时可以使用后props进行解耦，在接收参数时，可以向父子组件之间传递参数一样。

{
  path: '/category/:id',
  name: 'Category',
  component: Categorys,
  //props: true 布尔模式
  //props: {id: true} 对象模式
  //props: route => ({ query: route.query.q }) //函数模式
}

7.导航守卫
全局导航守卫：在router的index页面定义如下方法：

• 前置钩子：在路由跳转之前触发，router.beforeEach((to,from) => {doSomething})
• 后置钩子：在路由跳转之后触发，router.afterEach((to,from) =>{doSomething})

路由独享导航守卫
在定义组件路由是添加beforeEnter属性

const routes = [
     {
         path: '/users/:id',
         component: UserDetails,
         beforeEnter: (to,from) => {
             return false//拦截
         }
     }
]

组件内防护
可以在组件中使用beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave,上述三个方法可生命周期同级。

8.路由配合keep-alive
在Vue2.x中可以使用如下代码：

<keep-alive>
     <router-view/>
</keep-alive>

在vue3.x中可以使用如下代码：

<router-view v-slot='{Component}'>
     <transition>
         <keep-alive>
             <component :is='Component'></component>
         </keep-alive>
     </transition>
</router-view>

使用keep-alive后组件就不会被重复创建和销毁

keep-alive的几个参数：

• include:正则表达式(让某些组件使用keep-alive)
• exclude:正则表达式(排除某些组件使用keep-alive)