专栏首页eclipse编程人类高质量vue学习笔记(四)

人类高质量vue学习笔记(四)

1. 路由

引言

说起路由大家可能会立即联想到家里的路由器,我们都知道那玩意是用来分发网络的。

路由其实就是一种对应关系

比如说我们在浏览器中输入网址,浏览器要去请求这个 url 地址对应的资源。url 地址和资源之间存在的对应的关系,就是路由。

vue 中的路由其实就像一个路由器,它可以根据用户的请求路径按照一定的规则转发到不同的页面。

VueRouter 是 Vue.js 官方提供的路由管理器,功能非常强大。

2. 快速使用

2.1 引入 js 文件

  • 最关键是 vue-router.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  

2.2 创建组件

这里我们新建用户管理订单管理两个组件

const user = {
  template:'<h2>欢迎来到用户管理界面</h2>'
};

const order = {
  template:'<h2>欢迎来到订单管理界面</h2>'
};

2.3 创建路由对象并配置路由规则

 //创建路由对象
const newRouter = new VueRouter({
  routes:[
    {path:'/user',component:user},  
    {path:'/order',component:order}
  ]
});
  • path:跳转的路径。
  • component:路径对应的组件,说白了就是根据路径跳转到相应的页面。

2.4 将路由对象挂载到 vue 实例

  • router: newRouter,就是将路由对象挂载到 vue 实例上。
const app = new Vue({
  el: "#app",
  data: {
  },
  methods: {
  },
  router:newRouter 
});

2.5 创建路由跳转链接

  • router-link 可以替换 a 标签
  • to:跳转路径
<router-link to="/user" tag="button">用户管理</router-link>
<router-link to="/order" tag="button">订单管理</router-link>

2.6 创建路由占位符

  • router-view,路由占位符,就是我们要跳转的页面会替换这一行代码。
<router-view></router-view>

2.7 完整代码

 <div id="app">
  <!-- 4. 创建路由跳转链接 -->
  <router-link to="/user" tag="button">用户管理</router-link>
  <router-link to="/order" tag="button">订单管理</router-link>
  <hr>
  <!-- 5. 路由占位符,就是我们要跳转的页面会`替换`这一行代码 -->
  <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
  // 1. 新建`用户管理`和`订单管理`两个组件
  const user = {
      template: '<h2>欢迎来到用户管理界面</h2>'
  };
  const order = {
      template: '<h2>欢迎来到订单管理界面</h2>'
  };
  // 2. 创建路由对象
  const newRouter = new VueRouter({
      routes: [
          { path: '/user', component: user },
          { path: '/order', component: order }
      ]
  });
  // 3. 将路由对象挂载到 vue 实例
  const app = new Vue({
      el: "#app",
      data: {
      },
      methods: {
      },
      // 挂载路由对象
      router: newRouter
  });
</script>

运行结果:

点击用户管理:

讲解:当点击用户管理的时候,路由就会根据 "/user"路径找到对应的 user 组件,user 组件页面的内容就会替换<router-view></router-view>这一行代码,显示出“欢迎来到用户管理界面”。

3. 路由重定向

  • 路由重定向:第一次进入页面,默认跳转的组件页面。
  • 关键词:redirect
const newRouter = new VueRouter({
      routes: [
          { path:'/',redirect:'/order'},
          { path: '/user', component: user },
          { path: '/order', component: order }
      ]
  });

运行结果:

4. 嵌套路由

嵌套路由:路由下面有子路由,说白了就是点击父菜单,显示子菜单,点击子菜单显示对应的页面。

<div id="app">
    <router-link to="/user">用户管理</router-link>
    <!-- 5. 路由占位符,就是我们要跳转的页面会`替换`这一行代码 -->
    <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<template id="user">
    <div>
        <router-link to="/user/add">用户添加</router-link>
        <router-link to="/user/update">用户编辑</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>
<script>
    // 1. 新建`用户管理`、`用户添加`、`用户修改`三个组件
    const user = {
        template: '#user'
    }
    const add = {
        template: '<h2>欢迎来到用户添加页面</h2>'
    };
    const update = {
        template: '<h2>欢迎来到用户修改页面</h2>'   
    };
    // 2. 创建路由对象
    const newRouter = new VueRouter({
        routes: [
            {
                path: '/user',
                component: user,
                // 3. 创建嵌套路由
                children: [
                    { path: 'add', component: add },
                    { path: 'update', component: update },
                ]
            },
        ]
    });
    // 4. 将路由对象挂载到 vue 实例
    const app = new Vue({
        el: "#app",
        data: {
        },
        methods: {
        },
        // 挂载路由对象
        router: newRouter
    });
</script>

运行结果:

4.1 刚进入页面

4.2 点击用户管理

4.3 点击用户添加

5. 路由传参

5.1 query 方式

5.1.1 通过 ? 号形式拼接参数

<router-link to="/user?id=21">用户管理</router-link>

5.1.2 在跳转的组件中获取参数

const user = {
    template: '#user',
    data() {
        return {
        }
    },
    created() {
        console.log("============="+this.$route.query.id);
    },
    methods: {},
}

5.1.3 打印结果:

5.2 params 方式

5.2.1 使用 restful 方式传递参数:

<router-link to="/user/21">用户管理</router-link>

5.2.2 修改路由:

const newRouter = new VueRouter({
  routes:[
    {path:'/user/:id',component:user}   //路径中获取对应参数
  ]
});

5.2.3 在跳转的组件中获取参数:

const user = {
    template: '#user',
    data() {
        return {
        }
    },
    created() {
        console.log("============="+this.$route.params.id);
    },
    methods: {},
}

5.2.4 打印结果:

6. 路由跳转

this.$router.push(" 路径 ");

6.1 使用 js 方法跳转页面:

<div id="app">
    <router-link to="/user">用户管理</router-link>
    <!-- 5. 路由占位符,就是我们要跳转的页面会`替换`这一行代码 -->
    <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<template id="user">
    <div>
        <router-link to="/user/add">用户添加</router-link>
        <router-link to="/user/update">用户编辑</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>
<template id="add">
    <div>
        <h2>欢迎来到用户添加页面</h2>
        <button @click="toUserUpdate()"> 点击跳转到用户管理界面</button>
    </div>
</template>
<script>
    // 1. 新建`用户管理`、`用户添加`、`用户修改`三个组件
    const user = {
        template: '#user',
    }
    const add = {
        template: '#add',
        methods: {
            toUserUpdate(){
                this.$router.push("/user/update");
            }
        },
    };
    const update = {
        template: '<h2>欢迎来到用户修改页面</h2>'   
    };
    // 2. 创建路由对象
    const newRouter = new VueRouter({
        routes: [
            {   
                path: '/user',
                component: user,
                // 3. 创建嵌套路由
                children: [
                    { path: 'add', component: add },
                    { path: 'update', component: update },
                ]
            },
        ]
    });
    // 4. 将路由对象挂载到 vue 实例
    const app = new Vue({
        el: "#app",
        data: {
        },
        created() {
        },
        methods: {
        },
        // 挂载路由对象
        router: newRouter
    });
</script>

6.2 首先进入到用户添加页面:

6.3 点击按钮跳转到用户编辑页面:

6.4 js 方式路由跳转并传参

this.$router.push({ path:"/login",params: {id:123} });
this.$router.push({ path:"/login",query:{name:"刘华强"} });

7. 路由导航守卫

路由导航守卫:相当于门卫的作用。当你进入登录页面:放行。当你没有登录就想访问其他页面:请返回到登录页面。当导航守卫发现你没有携带 token :请返回到登录页面。

router.beforeEach((to, from, next) => {
  // 放行登录
  if (to.path === '/login') {
    return next()
  }
  // 获取token
  const tokenStr = sessionStorage.getItem('token')
  if (!tokenStr) {
    return next('/login')
  } else {
    next()
  }
})
  • to 表示将要访问的路径
  • from 表示从哪里来
  • next 是下一个要做的操作,放行

-END-

本文分享自微信公众号 - eclipse编程(eclipsecamp),作者:一颗雷布斯

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-08-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 人类高质量vue学习笔记(一)

    官方解释:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。

    一颗雷布斯
  • 人类高质量vue学习笔记(二)

    我们知道可以通过「插值表达式」显示 data 属性中的值,例如{{username}}

    一颗雷布斯
  • 人类高质量vue学习笔记(三)

    一颗雷布斯
  • 《编写高质量代码》学习笔记(1)

    前言 看大神推荐的书单中入门有这么一本书,所以决定把这本书的精华(自认为很有用的点),或许是我自己现在能用到的点都提炼出来,供大家参考学习。 以下内容均出自《...

    我没有三颗心脏
  • 《编写高质量代码》学习笔记(2)

    写着写着发现简书提醒我文章接近字数极限,建议我换一篇写了。 ---- 建议52:推荐使用String直接量赋值 一般对象都是通过new关键字生成的,但是Str...

    我没有三颗心脏
  • 《编写高质量代码》学习笔记(3)

    建议125:优先选择线程池 在Java1.5之前,实现多线程比较麻烦,需要自己启动线程,并关注同步资源,防止出现线程死锁等问题,在1.5版本之后引入了并行计算框...

    我没有三颗心脏
  • vue 学习笔记第四弹 - Webpack

    webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;

    syy
  • 人类高质量 Java 学习路线【一条龙版】

    大家好,我是鱼皮。现在网上的编程资料实在太多了,而且人人肯定都说自己的最好,那就导致大家又不知道怎么选了。大部分的博主推荐资源,也就是把播放量高的视频说一遍,水...

    程序员鱼皮
  • 跳槽?前端面试知识点目录大全~

    金三银四,又到了一年一度的跳槽季,相信大家都在准备自己的面试笔记,我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自己复习。详细内容会在之后一一对...

    苏南
  • 写技术博客那点事

    写文章是一个短期收益少,长期收益很大的一件事情,人们总是高估短期收益,低估长期收益。往往是很多人坚持不下来,特别是写文章的初期,刚写完文章没有人阅读会有一种挫败...

    Fundebug
  • React实战——从零搭建一款轻量级个人OA系统

    随着前端技术的飞速发展, 我们需要不断学习前端技术, 如React, Vue, Nodejs等, 为了让大家更快速的掌握前端技能, 进阶高级工程师, 笔者每个月...

    徐小夕
  • 个人分享--web前端学习资源分享

    6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天...

    守候i
  • 一统江湖的大前端(7)React.js-从开发者到工程师

    许多入职前端的开发者,都是从熟练使用框架进行业务逻辑开发而开始的。说到框架,Vue,React,Angular三大框架都已经圈定了自己的用户群,从粉丝的数量...

    大史不说话
  • Python学习笔记(四)——高级特性

    本文是廖雪峰的Python教程的笔记,主要是摘抄一些重点。所以我把他划分到转载里。侵删。

    蛮三刀酱
  • 细节满满的四轮字节跳动面经

    面试官又问了Object.defineProperty除了 set get外还有什么属性,我回答了configurable enumerable。vue-rou...

    落落落洛克
  • 金九银十:一年前端的面试分享

    以上是五点非常致命的,毫不客气的说,我可能连简历都过不了HR初筛,当然也没有告诉家人自己的境况,不过竟然自己做出的决定,那么就不要懊恼自己的做法,一股脑准备复习...

    落落落洛克
  • 一年前端的面试分享

    以上是五点非常致命的,毫不客气的说,我可能连简历都过不了HR初筛,当然也没有告诉家人自己的境况,不过竟然自己做出的决定,那么就不要懊恼自己的做法,一股脑准备复习...

    前端迷
  • 2017 我的技术之路:不忘初心,夯实基础

    又一年春去冬来,到了年末盘点的时候,感觉自己今年相较于前两年沉稳了些,也愈能明晰自身的不足;所以本年的主题就定为了不忘初心,夯实基础。今年年初的时候领证结婚,未...

    王下邀月熊
  • Vue的学习笔记(中篇)

    Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第...

    前端皮皮

扫码关注云+社区

领取腾讯云代金券