v-router全面学习

最新推荐文章于 2024-04-14 14:03:18 发布
最新推荐文章于 2024-04-14 14:03:18 发布
阅读量350 收藏 1
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangbiao9292/article/details/104195271
版权

文章目录

安装

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

npm

npm install vue-router

使用

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

简单使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单使用</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/home">去家里</router-link>
        <router-link to="/school">去学校</router-link>
        <router-view></router-view>
    </div>
</body>
<script>
    const Home = {
        template: '<div>在家里</div>'
    }
    const School = {
        template: '<div>在学校</div>'
    }
    const routes = [{
            path: '/home',
            component: Home
        },
        {
            path: '/school',
            component: School
        }
    ]
    const router = new VueRouter({
        routes
    })
    new Vue({
        router,
        el: "#app",
    })
</script>

</html>

动态路由匹配

这里官方文档需要明白的几个问题:
1 路由能够进行动态控制
2 路由能够有js进行逻辑跳转
3 路由能够进行高级匹配
下面编了一个例子来说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单使用</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/telescreen/1">一号流水线工人</router-link>
        <router-link to="/telescreen/2">二号流水线工人</router-link>
        <router-link to="/others">其他部门</router-link>
        <router-view></router-view>
       
    </div>
</body>

<script>
    /**
     *  需要解决的问题:
     *  1 创建一个'手机屏幕'组件,作为基础组件,给一号流水线工人和二号流水线工人使用
     *  2 在他们把手机屏幕组装之前,需要安装各自的序列号
     *  3 其他流水线的工人不作业
     */
    const teleScreen={
        template: '<div>手机屏幕</div>',
        beforeMount() {
            var x=this.$route.params;
            console.log(x)
        }
    }

    const others={
        template: '<div>其他流水线的工人不工作</div>',
        mounted() {
            this.$router.push("/telescreen/1");
        },
    }
    const routes = [
        {
            path: '/telescreen/:id',
            component: teleScreen
        },
        {path:'*',component:others}
  
    ]
    const router = new VueRouter({
        routes
    })
    new Vue({
        router,
        el: "#app",
    })
</script>

</html>

嵌套路由

根据官方文档,需要弄清楚以下几点:
1 嵌套路由,说白了,就是在组件里套组件
2 "/"表示根路径
下面编写了一个教室和学生A的例子:在教室组件中,想办法渲染出来学生A

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单使用</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/classroom">教室</router-link>
        <p>下面是渲染的出口</p>
        <router-view></router-view>
       
    </div>
</body>

<script>
  
    const classroom={
        template: `
        <div>我是教室
        <router-view></router-view>
        </div>`,
 
    }
    const student_a={
        template: '<div>student_a</div>',
 
    }
 
    const routes = [
        { 
            path: '/classroom', 
            component: classroom,
            children:[
                {
                    path: 'student_a', 
                    component: student_a,
                }
            ] 

        },
         
  
    ]
    const router = new VueRouter({
        routes
    })
    new Vue({
        router,
        el: "#app",
    })
</script>

</html>

编程式导航

根据官方文档,该块内容主要弄清楚以下几点:
1 除了这种声明式的导航外,我们也能用js逻辑代码控制
2 熟练掌握router.push的用法
3 了解router.replace和router.go的用法
4 了解History模式
针对以上知识点,编写了个小例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单使用</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
         <button @click="go_a">go A</button>
         <button @click="go_b">go B</button>
         <router-view></router-view>
    </div>
</body>

<script>
  
    const A={
        template: ` <div>A</div>`,
    }
    const B={
        template: ` <div>B</div>`,
    }
  
 
    const routes = [
        { 
            path: '/A', 
            name:'isA',
            component: A, 
        },
        { 
            path: '/B', 
            component: B, 
        },
         
  
    ]
    const router = new VueRouter({
        routes
    })
    new Vue({
        router,
        el: "#app",
        methods: {
            go_a:function(){
                // this.$router.push('A');
                // this.$router.push({path:'/A'})
                this.$router.push({name:'isA'},function(){
                    console.log("完成了跳转")
                })
            },
            go_b:function(){
                this.$router.push({path:'/B'})
            }
        },
    })
</script>

</html>

命名路由

根据官方文档,命名路由就是用name把该路由给个名称,以便标识

命名视图

根据官方文档:我们在进行路由的时候,一般一个url对应一个组件,但是呢,该组件也许会分为几个部分,需要不同展示,这个时候就需要用到命名视图了
举了个小例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单使用</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-view ></router-view>
        <router-view name="a"></router-view>
        <router-view name="b"></router-view>
    </div>
</body>

<script>
  
    let school={
        template:`<div>学校</div>`
    };
    let studenta={
        template:`<div>学生A</div>`
    };
    let studentb={
        template:`<div>学生B</div>`
    }
  
 
    const routes = [
        { 
            path: '/',
            components: {
                default:school,
                a:studenta,
                b:studentb
            }, 
        },          
    ]
    const router = new VueRouter({
        routes
    })
    new Vue({
        router,
        el: "#app",
    })
</script>

</html>

重定向和别名

根据官方文档,就是用来把路由起个别名和重新定位到不同url的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单使用</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-view ></router-view>
    </div>
</body>

<script>
  
    let school={
        template:`<div>学校</div>`
    };
    let studenta={
        template:`<div>学生A</div>`
    };
    let studentb={
        template:`<div>学生B</div>`
    }
  
 
    const routes = [
        { 
            path: '/school',
            component :school
        },
        // { 
        //     path: '/a',
        //     component :studenta,
        //     // redirect: '/b'
        // },   
        { 
            path: '/b',
            component :studentb,
            alias: '/aaaas'
        },             
    ]
    const router = new VueRouter({
        routes
    })
    new Vue({
        router,
        el: "#app",
    })
</script>

</html>

路由组件的传参

根据官方文档解释,需要弄清楚以下几点:
1 如果不用props,是可以用this.$route.params实现参数获取的
2 用props可以进行解耦
3 props的具体用法
举了个小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单使用</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-view ></router-view>
    </div>
</body>
<script>
    let User={
        // template:`<div>User {{ $route.params.id }}</div>`,
        template:`<div>User {{ id }}</div>`,
        props:['id']
    };
    const routes = [
        { 
            path: '/user/:id',
            component :User,
            props: true
        },               
    ]
    const router = new VueRouter({
        routes
    })
    new Vue({
        router,
        el: "#app",
    })
</script>

</html>

路由守卫

根据官方文档解释,守卫其实就是路由的生命周期:
换句大白话,就是你在路由的时候,可以让你在路由前,路由后进行逻辑操作,操作顺序如下:
1 导航被触发。
2 在失活的组件里调用离开守卫。
3 调用全局的 beforeEach 守卫。
4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5 在路由配置里调用 beforeEnter。
6 解析异步路由组件。
7 在被激活的组件里调用 beforeRouteEnter。
8 调用全局的 beforeResolve 守卫 (2.5+)。
9 导航被确认。
10 调用全局的 afterEach 钩子。
11 触发 DOM 更新。
12 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
具体例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单使用</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <button @click="goschool">进入教室</button>
        <router-view ></router-view>
    </div>
</body>
<script>
    let school={
        template:`<div>进入了教室</div>`,
    };
    const routes = [
        { path: '/school', component :school,beforeEnter: (to, from, next) => {
            console.log("独享守卫");
            next();
      }},               
    ]
    const router = new VueRouter({
        routes
    })

    router.beforeEach((to, from, next) => {
            //  console.log(to);
            //  console.log(from);
            //  console.log(next);
            console.log("前置守卫")
            next();
    })
    router.beforeResolve((to, from, next) => {
 
             console.log("解析守卫")
             next();
    })
    router.afterEach((to, from) => {
    
             console.log("后置守卫")
           
    })
    new Vue({
        router,
        el: "#app",
        methods: {
            goschool:function(){
                 this.$router.push("school")
            }
        },
    })
</script>

</html>

路由元信息

根据官方文档显示,我们需要弄清楚meta字段的玩法.
例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单使用</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <button @click="goschool">进入教室</button>
        <router-view ></router-view>
    </div>
</body>
<script>
    let school={
        
        template:`<div>进入了教室</div>`,
    };
    const routes = [
        { path: '/school', component :school,meta:{ classname: "一年级一班" },beforeEnter: (to, from, next) => {
            console.log("独享守卫");
            console.log(to.matched);
            to.matched.some(function(item){
                console.log(item.meta)
            })
            next();
      }},               
    ]
    const router = new VueRouter({
        routes
    })
 
    new Vue({
        router,
        el: "#app",
        methods: {
            goschool:function(){
                 this.$router.push("school")
            }
        },
    })
</script>

</html>

过度动效

根据官方文档,就是做一些动画效果的,很简单.

数据获取

根据官方文档,获取数据分为两种

  1. 导航完成之后获取
  2. 导航完成之前获取

记得做好用户体验

滚动行为

根据官方文档解释,滚动行为其实就是锚点到对应的组件,让用户有更好的体验
例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单使用</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <button @click="goschool">进入教室</button>
        <transition name="slide-fade">
            <router-view></router-view>
          </transition>
    </div>
</body>
<script>
    let school={
        
        template:`<div style='width:2000px;height:1000px;border:solid 1px red'>进入了教室</div>`,
    };
    const routes = [
        { path: '/school', component :school,meta:{ classname: "一年级一班" },beforeEnter: (to, from, next) => {
            console.log("独享守卫");
            console.log(to.matched);
            to.matched.some(function(item){
                console.log(item.meta)
            })
            next();
      }},               
    ]
    const router = new VueRouter({
        routes,
        scrollBehavior (to, from, savedPosition) {
            // return 期望滚动到哪个的位置
            console.log(savedPosition);
            return { x: 1000, y: 0 }
        }
    })
 
    new Vue({
        router,
        el: "#app",
        methods: {
            goschool:function(){
                 this.$router.push("school")
            }
        },
    })
</script>

</html>

路由懒加载

这块内容比较重要个人感觉
路由懒加载,说白了,就是你写了很多的.vue组件,大型项目可能会有成千上万个,那么在初始化的时候,如果都加载出来,肯定会影响效率,那么,vue就提出了一个概念,就是点击的时候,也就是在使用的时候,在加载这个模块,具体的见下面的代码分析,需要搭建vue-cli
搭建完后,自己创建个router.js剥离出router;如果不剥离,放在main.js里面一样的;
然后,你用import index from …进行导入的时候,你发现,及时你没有用到notfound.vue模块,依然加载了,但是你用const index= () =>…进行导入的时候,不用notfound.vue模块就不会加载出来呀
在这里插入图片描述在这里插入图片描述在这里插入图片描述

李卓书
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue学习之router
m0_46977781的博客
07-16 515
router1.前端路由的概念2.实现原理2.1hash2.2history.pushState({},"",'home')2.3history.replaceState({},"",'home')3.实现3.1. 引入路径3.2. 配置路由相关信息3.2.1导入路由3.3使用3.3.1通过Vue.use(插件)，安装插件3.3.2创建路由对象3.3.2.1创建路径与组件的对应关系，即配置映射关系3.3.2.2将router对象传入到vue实例中使用4. 设置默认路径5. 修改跳转模式6. router-
vue-router 学习总结
qq_46051400的博客
12-31 138
vue-router 学习总结 HTML 中使用 <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- 通过传入 `tag` 属性指定该标签是 li 标签 --> <!-- https://router.vuejs.org/zh/api/#router-link 查看更多 router-link 属性--> <!-- <router
vrouter:vhtml的奇妙路由器:glowing_star:
05-06
虚拟路由器 :glowing_star: vrouter是一个用于vhtml的简单轻便的路由器（ vhtml ~345 Bytes gzip ）。 （不知道什么是vhtml ？请检查此） 安装 npm i —-save vrouter 指数： [使用入门]（＃使用入门） 入门 import h from 'vhtml' import router from 'vrouter' import PostsContainer from './PostsContainer' import PostContainer from './PostContainer' router ( { indexRedirect : 'posts' , 'posts' : < PostsContainer> , 'post' : < PostContainer> } , document . queryS
前端路由（v-router）
m0_60782710的博客
04-03 5392
1.什么是路由 路由（英文：router）就是对应关系 2.什么是前端路由 通俗易懂的概念：Hash地址（就是之前理解的锚链接）与组件之间的对应关系 而hash地址指的就是锚链接后面的值举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
v-router 路由基础
小hu同学
03-20 2068
导读：由于本篇文章我是在juejin上面发了后，复制过来的，所以会有一些动态图没有动，图片有水印，排版等问题 一、路由的基本概念与原理 1.什么是路由 路由（英文：router）就是对应关系。 2.SPA 与前端路由 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现。 结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！ 3.什么是前端路由 概念：Hash 地址与组.
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
Vue全家桶 Vue-router的详细介绍
m0_71485750的博客
07-31 1190
在架构一个网络时，非常重要的两个设备就是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器事实上，路由器主要维护的是一个映射表；映射表会决定数据的流向；...
EthernetKRL3.1.3、KUKA-router、KUKA软件包合集
07-05
《全面解析KUKA机器人系统：EthernetKRL3.1.3、KUKA-router与软件集成》 在工业4.0的时代背景下，自动化技术尤其是机器人技术的发展日新月异，其中KUKA机器人以其卓越的性能和广泛的应用领域赢得了业界的广泛认可。...
jest-v26-codelab:通过示例学习jestjs v26.xx测试框架
03-16
Jest的核心理念是为开发者提供一个易于上手、全面集成的测试环境。它包含了断言库、模拟（mock）机制、自动 Mocking、测试覆盖率报告等功能，使得测试工作变得简单而高效。 ### 2. 安装与配置 首先，你需要通过npm...
H12-821-V1.0-ENU学习文档手册.pdf
10-18
【H12-821_V1.0-ENU 学习文档手册】是华为认证中针对HCIP-Datacom-Core Technology V1.0的一项考试的学习资料。该文档旨在帮助考生掌握并理解与华为网络技术相关的知识，以通过H12-821_V1.0-ENU这一考试。下面我们将...
routeros入门到精通v6311e
04-12
本书《RouterOS入门到精通v6.3.11e》是介绍RouterOS的书籍，适合对RouterOS感兴趣的学习者和专业人士阅读。 RouterOS的特点在于其高带宽传输能力，尤其是在基于802.11abgn/ac协议的网络环境中表现优异。其独有...
routeros入门资料v6312e.zip
11-15
"routeros入门资料v6312e.zip" 是一份针对ROS入门的学习资源，特别针对ROS版本v6312e。该压缩包中的核心资料是名为"routeros入门到精通v6312e ros 余松.pdf"的PDF文件，它很可能包含了详细的ROS基础知识和实战教程。...
阿里云-Region、VPC、VSwitch、Vrouter
最新发布
Haines
04-14 519
作为专有网络中重要的功能组件，它可以连接专有网络内的各个交换机，同时也是连接专有网络和其他网络的网关设备。每个专有网络创建成功后，系统会自动创建一个路由器。不同的专有网络之间二层逻辑隔离，可以在自己创建的专有网络内创建和管理云产品实例，比如ECS、负载均衡、RDS等。云资源不可以直接部署在专有网络(VPC)中，必须属于专有网络内的一个交换机(vSwitch)内。重要：每个专有网络都由至少一个私网网段、一个路由器和至少一个交换机组成。重要：每个专有网络都由至少一个私网网段、一个路由器和至少一个交换机组成。
Vue-Router与原理
m0_73442777的博客
04-18 1650
Vue Router的原理是基于浏览器的History API，即HTML5中新增的History接口，通过这个API可以在浏览器中动态修改URL，并在不刷新页面的情况下实现页面的切换。Vue Router基于History API提供了一个组件化的路由管理解决方案，可以方便地进行路由的配置和管理。
VRRP的工作原理和实验详解
发果叁
09-29 3660
虚拟路由器冗余协议 (VRRP) 为一组路由器提供一个虚拟 IP 地址，VRRP 可以与不同厂商的路由器一起使用，并且 VRRP 支持消息摘要 5 (MD5) 身份验证。VRRP 是一种开放标准的 IEEE 协议，它使一组路由器能够形成单个虚拟路由器，使用 VRRP，几个路由器被组合在一起，看起来就像网络的一个默认网关。在网络中提供冗余，消除了静态默认路由环境固有的单点故障。
v-router实现原理
weixin_43962020的博客
05-07 343
单页面应用程序，只有一个完整的页面，它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用的核心之一是:更新视图而不重新请求页面，vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式。 1.hash模式 随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是单页应用。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。类似于服务端路由，前端路由实现
Vue全家桶 Vue-router的详细介绍_v-router，毕业设计选题汇总表
2301_77033583的博客
04-08 774
如果我们想要提示用户的什么路径不正确我们可以通过。
Cesium--Property机制中的CallbackProperty理解与回调函数闭包的试探性理解
李卓书
07-08 1万+
闭包,回调函数,CallbackProperty
RouterOS V5.0中文教程：深入解析与应用
"routerOS V5.0中文手册"是一份全面的指南，它将帮助读者深入理解RouterOS的各种功能，提升网络管理技能，并在实际操作中实现更高效、更个性化的网络解决方案。无论你是初次接触RouterOS，还是希望进一步提升技能的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李卓书

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值