anti desgin vue tabs 动态路由 vue router动态路由

转载

mob64ca1417736e 2024-04-26 16:06:49

1：  使用vue.use() ==> 安装一下插件

2： 然后new 出来vueRouter 对象。

3：  配置路由规则是一个数组

4： 然后导出这个路由实例。  导出实例对象的原因就是挂载到new Vue 实例上。

    路由才可以真正生效, 
5:  配置路由映射关系, 然后首先创建组件,  然后在 router 路由中配置
    引入组件, 然后配置路由对应的关系。
    path: '/login'   component: 'Login'   登录组件
6:  router-link: 标签: 身上有四个属性： router-link:  标签默认会被渲染成为a 标签
    to: 属性    跳转的路径
    replace: 属性： (router-link 默认跳转的就是pushState 但是可以改成replaceState 方法)
    tag: 属性   需要渲染的标签 (渲染成其他标签)
    active-class="active" 某一个router-link： 标签处于活跃的状态与一个类属性。
    但是可以通过aactive-class: 修改类属性。
    也可以进行统一的修改:
    const router = new vueRouter({
       routers,  // 配置路由规则对应的对象
       mode: 'history'm, html5: 路由规则的历史模式
       linkActiveClass: 'active'  统一定义活跃状态路由类样式
    })
7:  在App 跟组件中使用 <router-view></router-view>   使用路由占位符 进行渲染

8:  配置路由规则就是路径对应一个组件。 path: ===> component 组件
9:  $router 方法可以调用  .push() 方法,  .repplace() 方法
    $router 就是创建出来的 router 对象,
    $route  就是当前路由处于活跃状态,   就是拿到当前活跃状态的路由。
10: 所以$router 的范围比 $route 的范围大。
当前组件动态传递参数:

 可以在当前组件 进行接受
computed: {
   userId() {
      return this.$route.params.abc
   }
}
在路由开发中有两个重要的属性,  就是$router 属性。
另外还有一个$route 属性。

认识路由懒加载

路由懒加载:

  当构建应用打包程序的时候,  javascript包会变得非常庞大。 影响页面加载。
  如果我们把不同对应的组件分分割成不同的代码块,  然后当路由被访问的时候才可以对应加载组件。 
  这样就可以高效了。

1: 路由懒加载作了什么？
   路由懒加载就是主要在作用就是将路由对应的组件打包成一个个js 代码块。
   只有在这个路由被访问的时候, 才可以加载对应的组件。

2: 路由懒加载的写法：
   const routes = [
     {
       path: '/home',
       component: ()=> import('../component/Home')
     },
     {
       path: '/about',
       component: ()=> import('../component/About')
     }
   ]

anti desgin vue tabs 动态路由 vue router动态路由_类属性