• 【Vue】路由


    快速入门

    1. 安装路由

    npm install --save vue-router

    2. 定义组件

    <template>
      <div>
        <h3>Home</h3>
        <router-link to="/login">Login</router-link>
      </div>
    </template>
    <script>
    export default {};
    </script>

    3. 定义路由规则

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    export default new VueRouter({
        mode: 'history',
        routes: [
            { path: '/', component: () => import('../views/home.vue') },
            { path: '/login', component: () => import('../views/login.vue') },
        ]
    });

    4. 在需要显示路由位置放<router-view />

    <router-view />

    这就完成一个简单路由

    深入路由

    基础

    VueRouter.model :

    • hash(默认):使用 URL 的 hash 来模拟一个完整的 URL
    • history :利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

    <router-link> : 路由功能导航,默认生成<a>标签,可以使用tag属性修改生成的标签

    <router-view /> : 路由出口,匹配到的路由会在这里渲染

    动态路由

    通常链接需要带上参数,根据参数显示不同结果

    Vue动态路由用":" 匹配路径参数,然后就匹配的参数放入$route.params

    1. 定义动态路由,这里需要对路由命名,获取名称和性别

    { path: '/login/:username/:sex', name: 'login', component: () => import('../views/login.vue') },

    2. 路由链接 - 需要路由命名

    <router-link :to="{ name: 'login',  params: { username, sex } }">Login</router-link>
    <!--等价于-->
    <router-link to="/login/WilsonPan/1">Login</router-link>

    3. 组件获取路由参数

    <h3>username : {{ this.$route.params.username }}</h3>
    <h3>sex : {{ this.$route.params.sex === 1 ? "男" : "女" }}</h3>

    注:除了可以设置路由参数,还可以设置query参数

    <router-link :to="{ name: 'login', query: { id: 3 }, params: { username, sex } }">Login</router-link>
    <!--等价于-->
    <router-link to="/login/WilsonPan/1?id=3">Login</router-link>

    组件获取query参数

    <h3>id : {{ this.$route.query.id }}</h3>

    嵌套路由

    一个路由渲染的页面包含另外的路由

    1. 定义路由

    {
                path: '/', 
                name: 'home', 
                component: () => import('../views/home.vue'), 
                children: [
                    { path: '/', component: () => import('../components/ComponentDemo.vue') },
                    { path: '/directives', component: () => import('../components/Directives.vue') }
    
                ]
            }

    2. 在需要显示子路由的地方放子路由渲染页面

    <router-view />

    导航守卫

    导航守卫主要用来通过跳转或取消的方式守卫导航,导航守卫有全局的,单个路由的,组件级别,用于未登录控制访问,控制访问等。

    全局路由

    const router = new VueRouter({ ... })
    
    router.beforeEach((to, from, next) => {
      // ...
    })
    • to: Route: 即将要进入的目标路由对象
    • from: Route: 当前导航正要离开的路由
    • next: Function: 一定要调用该方法来 **resolve** 这个钩子。执行效果依赖 next 方法的调用参数。

    路由独享的守卫

    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
            // ...
          }
        }
      ]
    })

    组件内的守卫

    const Foo = {
      template: `...`,
      beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不!能!获取组件实例 `this`
        // 因为当守卫执行前,组件实例还没被创建
      },
      beforeRouteUpdate (to, from, next) {
        // 在当前路由改变,但是该组件被复用时调用
        // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
        // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
      }
    }
  • 相关阅读:
    RabbitMQ系列教程之七:RabbitMQ的 C# 客户端 API 的简介
    RabbitMQ系列教程之六:远程过程调用(RPC)
    git无法提交,存在未提交的修改,在重新合并前或者撤销更改
    安装mysql提示3306端口已经被占用解决方案
    区块链学习一基本知识
    超级账本 --- ReadWriteSet的逻辑结构
    解决windows10 里vs2015 附件进程调试提示“此任务要求应用程序有提升的权限”
    Fabric V1 交易的生命周期
    sql 取首次投资的人
    Win10年度更新开发必备:VS2015 Update 3正式版下载汇总
  • 原文地址:https://www.cnblogs.com/WilsonPan/p/12770411.html
Copyright © 2020-2023  润新知