vue-router 笔记

路由的安装（搭建路由框架）

• 1. 导入路由对象，并调用Vue.use ( VueRouter );
• 2. 创建路由实例，并且传入路由映射配置；
• 3. 在Vue实例中挂载创建的路由实例。

使用vue-router的步骤

• 1. 创建路由组件
• 2. 配置路由映射：组件和路径映射关系
• 3. 使用路由：通过

默认路径的设置

{
    path：'',
    //redirect重定向
    redirect: '/home'
}

配置history模式

在配置路由和组件的映射关系中传参
const router = new VueRouter（{
    routes，
    mode：'history'
}）

router-link与router-view

1. router-link

•   是在router中提前注册好的组件，最终会渲染成a标签
  

•   通过to="/xx"实现跳转
  

•   通过tag="button"可以使其最终渲染成button按钮
  

•   replace属性，不会留下history记录，无法后退
  

•   active-class属性，可以修改router-link激活状态的类名；也可以在路由映射配置
    const router = new VueRouter（{
    routes，
    mode：'history',
    activeClass:'active'
   }）
  

router与route

$router的方法

• this.$router.push
• this.$router.replace

$route

指的是正在活跃的路由

动态路由

配置路径映射，/user/：userId 动态绑定 :to="'/user/'+useId" 获取userId this.$route.parmas.userId

路由的懒加载

打包构建项目的时候，js包会变得越来越大，影响页面的加载速度
因此可以使用路由的懒加载方式处理，就是用到的时候就加载
const Home = ()=> import("路径")
然后把Home组件，在路由规则之中配置