VUE：详解路由(router)

最新推荐文章于 2023-10-17 22:44:17 发布
最新推荐文章于 2023-10-17 22:44:17 发布
阅读量691 收藏 2
点赞数 1
分类专栏： VUE总结 文章标签： 详解路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41350225/article/details/89438791
版权

路由router

VUE路由

ue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换

整体的实例

在这里插入图片描述
实例代码：

<!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>Document</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">
        <h1>Hello App!</h1>
        <p>
            <!-- 路由导航 router-link-->
            <router-link to="/foo" tag="button">Go to Foo</router-link>
            <router-link to="/bar" tag="button">Go to Bar</router-link>
        </p>
        <!-- 路由视图 router-view-->
        <router-view></router-view>
    </div>
    <script>
        //根据路由匹配规则创建一个路由器
        const router = new VueRouter({
            //定义路由匹配规则
            routes: [
                //其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。
                { path: '/foo', component: { template: '<div>foo</div>' } },
                { path: '/bar', component: { template: '<div>bar</div>' } }
            ]
        });
        //让这个实例使用此路由器
        new Vue({
            el: "#app",
            router: router,
        })
    </script>
</body>

</html>

效果图：
在这里插入图片描述

路由导航

①更换路由地址

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航，通过 to 属性指定目标地址
在这里插入图片描述
以下两种实现方式得到的效果一样
在这里插入图片描述

②tag属性

可以通过配置 tag 属性生成别的标签
在这里插入图片描述
效果图：
在这里插入图片描述

③自动设置类

当对应的路由匹配成功，将自动设置类
在这里插入图片描述
我们可以给这个类设置些默认的样式，达到让他实现选中的效果
在这里插入图片描述
效果图：
在这里插入图片描述
可以修改这两个默认的类名，用自己喜欢的类名来定义
在这里插入图片描述
效果图：
在这里插入图片描述
命名代码：

linkActiveClass: 'active',
linkExactActiveClass: 'active',

④设置行内样式

可以直接在router上设置行内样式或者class，是可以生效的，会自动注入到生成的网页标签上

<router-link style="color:red;font-size: 50px;" to="/foo">Go to Foo</router-link>

效果图：
在这里插入图片描述

路由视图

显示路由器中定义的组件

<!-- 路由视图 router-view-->
<router-view></router-view>

路由器

配置路由

首先要定义route, 一条路由的实现。它是一个对象，由两个部分组成： path和component. path 指路径，component 指的是组件

我们这里有两条路由，组成一个routes:

routes: [
	//其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。
	{ path: '/foo', component: { template: '<div>foo</div>' } },
	{ path: '/bar', component: { template: '<div>bar</div>' } }
]

创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数

const router = new VueRouter({
      routes // routes: routes 的简写
})

配置完成后，把router 实例注入到 vue 根实例中,就可以使用路由了

new Vue({
	el: "#app",
	router: router,
})

完整代码：

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 路由导航 router-link-->
        <router-link to="/foo" tag="button">Go to Foo</router-link>
        <router-link to="/bar" tag="button">Go to Bar</router-link>
    </p>
    <!-- 路由视图 router-view-->
    <router-view></router-view>
</div>
<script>
    //定义路由匹配规则
    var routes = [
        //其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。
        { path: '/foo', component: { template: '<div>foo</div>' } },
        { path: '/bar', component: { template: '<div>bar</div>' } }
    ]
    //根据路由匹配规则创建一个路由器
    const router = new VueRouter({
        routes
    });
    //让这个实例使用此路由器
    new Vue({
        el: "#app",
        router: router,
    });
</script>

单个路由"component" 的值可以只是一个组件配置对象也就是说可以通过 Vue.extend() 创建的组件构造器，如下：
在这里插入图片描述
效果图：
在这里插入图片描述

在组件中访问路由器对象

动态的路径参数(多种情况匹配同一个组件)

①基本使用

在这里插入图片描述
效果图：
在这里插入图片描述

②细节分析

  1. 前面路径相同然后冒号后面参数不一致，这些就会被同一个【动态路径参数】路由匹配到
  2. 匹配到的【路径参数】会变为$route.params的值，以一个对象中的键值对的形式存在
  3. 【动态路径参数】路由不管是在使用时还是在定义时都应该以冒号分隔路径与参数
  4. /user:666 只会匹配 /user:name这种形式的路由规则而不会匹配/user这个路由规则
  5. /user?name=dd&sex=dff, 只会匹配/user形式规则，而不会匹配/user:name这种形式的规则

③可设置多段【动态路径参数】

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中
在这里插入图片描述
效果图：
在这里插入图片描述

④可带查询参数

在这里插入图片描述
在这里插入图片描述

⑤动态路径的参数发生变化时，对应组件会被复用

当使用动态路径参数发生变化时，从例如/link:1导航到/link:2，原来的组件实例会被复用
因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用

如下面的钩子函数只调用了一次，即复用了组件。如果是通过路由从其他组件过来的话，那么组件是会重新再次创建的
在这里插入图片描述
效果图：
在这里插入图片描述
可以看到mounted中的语句只执行了一次

⑥监听【动态的路径参数】的变化

路径参数变化时才会触发beforeRouteUpdate

在这里插入图片描述
在这里插入图片描述
如果你这时删除next方法的执行就可以阻止路由的跳转

⑦路由匹配的优先级

匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高

嵌套路由【显示多层级的路由视图】

①在组件中添加路由

在这里插入图片描述

②在路由器中添加子路由规则

在这里插入图片描述
效果图：
在这里插入图片描述

③在嵌套路由组件中影响跟路由与根视图

由于组件渲染的地方由对应路由的层级决定，所以只要我们在被嵌套的路由组件中的routr-link标签的to属性赋值为上层路由的路径，那么根视图就会渲染对应组件，从而实现常见业务：从子内容中跳转到主内容中去

//不管是决定路径还是相对路径都可以实现
<router-link to="/bar">foo_1</router-link>
<router-link to="../bar">foo_2</router-link>

编程式路由【通过JavaScript实现路由控制】

①概述

前面我们通过<router-link to=”” >这个路由标签来对路由进行导航，关于这个标签，实际上它是声明式路由的做法（通过标签直接声明）

我们还可以如同操作window.history一样进行编程式的操作路由（通过js编程）

②说明

Vue中的编程式路由是模仿window.history而实现的，所以其提供的api和window.history提供的api非常相似

③实现

实际上当你点击 时，router.push这个方法也会在内部调用，所以说，点击 <router-link :to="…"> 等同于调用 router.push(…)
在这里插入图片描述
这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL
效果图：
在这里插入图片描述

④注意

  1. 该方法的参数既可以是一个字符串路径，也可以是一个描述地址的对象
this.$router.push({path:"/foo"});
  1. 该方法的参数对象中还可以包含query查询对象
this.$router.push({ path: "/foo", query: { sex: "man", age: 18 } });
  1. 匹配动态路径参数
//等价于 /foo:123,会匹配规则为/foo:id的规则
this.$router.push({ path: "/foo:123"});

⑤router.replace

用户在提交一则信息，跳转到下一个页面后，如果点了返回按钮，用户就会返回到信息填写的页面，这对于像订单支付页面这种界面并不友好
这时我们就可以使用 replace方法替换掉push，replace方法会直接替换掉当前的 history 记录

methods: {
   toFoo:function(){
        this.$router.replace(
            {path:'/foo'},
        )
    }
}

如果使用router-link标签，直接在上面添加replace属性即可

<router-link :to="foo" replace>Go to foo</router-link>

⑥push/repalce 方法的回调函数

在 2.2.0+，可选的在 router.push 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数
这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用

对位传参

methods: {
   toFoo: function () {
        this.$router.replace({ path: "/foo"},
            function (to) {
                console.log("跳转成功", to);
            }, function (to) { //跳转失败时的目标路由 to 为undefined
                console.log("跳转失败", to);
            });
    }
}

注意：如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users:1 -> /users:2)，也会触发跳转成功的回调函数

⑦router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

命名路由【通过名称找到真正路由】

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，我们可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称

使用编程式路由：

//路由配置
const router = new VueRouter({
    routes: [
        {
            path: '/bar',
            component: Bar,
            name: "mybar",
        }
    ]

});
//调用
this.$router.push({ name: 'mybar' });

声明式路由

const router = new VueRouter({
    routes: [
        {
            path: '/bar',
            component: Bar,
            name: "mybar",
        }
    ]

});
//调用
<router-link :to="bar" tag="button" replace>路由导航2</router-link>
new Vue({
    el: "#app",
    router: router,
    data:{
        bar:{name:"mybar"}
    },
});

命名视图【为了同时显示多个视图】

当同级同时刻显示多个视图时，我们就可以使用命名视图了，我们可以在界面中拥有多个单独命名的视图，而不是只有一个单独的视图

如果 router-view 没有设置名字，那么默认为名字为 default

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link to="/foo" tag="button">路由导航1</router-link>
        <router-link to="/bar" tag="button">路由导航2</router-link>

    </p>
    <router-view style="border:1px solid black"></router-view>
    <router-view name="one" style="border:1px solid red"></router-view>
    <router-view name="two" style="border:1px solid green"></router-view>
</div>
<script>
    let Foo_1 = Vue.extend({
        template: `<div><h3>我是组件Foo1</h3></div>`,
    });
    let Foo_2 = Vue.extend({
        template: `<div><h3>我是组件Foo2</h3></div>`,
    });
    let Foo_3 = Vue.extend({
        template: `<div><h3>我是组件Foo3</h3></div>`,
    });
    let Bar_1 = Vue.extend({
        template: `<div><h3>我是组件Bar1</h3></div>`,
    });
    let Bar_2 = Vue.extend({
        template: `<div><h3>我是组件Bar2</h3></div>`,
    });
    let Bar_3 = Vue.extend({
        template: `<div><h3>我是组件Bar3</h3></div>`,
    });

    const router = new VueRouter({
        routes: [
            {
                path: '/foo', components: {
                    default: Foo_1,
                    one: Foo_2,
                    two: Foo_3,
                },
            },
            {
                path: '/bar', components: {
                    default: Bar_1,
                    one: Bar_2,
                    two: Bar_3,
                }
            },
        ]
    });
    new Vue({
        el: "#app",
        router: router,
    });
</script>

效果图
在这里插入图片描述

路由重定向

重定向方式一【根据路由路径重定向】

将路由规则中component选项修改为redirect,其值为一个路由的地址如：/foo

重定向结果：当跳转到路由为/test时会渲染/foo所在组件

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link to="/foo" tag="button">路由导航1</router-link>
        <router-link to="/bar" tag="button">路由导航2</router-link>
        <router-link to="/test" tag="button">重定向</router-link>

    </p>
    <router-view style="border:1px solid black"></router-view>
</div>
<script>
    let Foo = Vue.extend({
        template: `<div><h3>我是组件Foo</h3></div>`,
    });
    let Bar = Vue.extend({
        template: `<div><h3>我是组件Bar</h3></div>`,
    });
    const router = new VueRouter({
        routes: [
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar },
            { path: '/test', redirect: '/foo' }
        ]
    });
    new Vue({
        el: "#app",
        router: router,
    });
</script>

效果图：
在这里插入图片描述

重定向方式二【根据路由名称重定向】

在这里插入图片描述

重定向方式三【通过函数返回真正路由】

return 重定向的 字符串路径/路径对象
在这里插入图片描述

路由别名

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样

<router-link to="/test" tag="button">路由导航2</router-link>
const router = new VueRouter({
    routes: [
        { path: '/bar', component: Bar, alias:'/test' },
    ]
});

在这里插入图片描述

路由组件传参

当我们通过路由规则跳转到不同的组件上时，我们可以在路由规则定义中传入参数

传参方式一：布尔模式

我们可以在路由规则对象上添加一个props属性，其值设置为true,如果 props 被设置为 true，route.params (动态路径参数，也就是冒号后面的东西) 将会被设置为组件属性
在这里插入图片描述
路由规则中冒号后面的路径参数会作为参数名，发起路由请求时传来的值就是其参数值。然后在组件中必须使用props来接收才能使用这个参数

效果图：
在这里插入图片描述
这里Foo组件规则中的props设置为false，所以接收不到参数

有多个路径参数
在这里插入图片描述
在这里插入图片描述

传参方式二：对象模式

在这里插入图片描述
效果图：
在这里插入图片描述

传参方式三：函数模式

可以创建一个函数返回 props。这样能够把静态值与基于路由的值结合作为参数传递给对应组件
在这里插入图片描述
效果图：
在这里插入图片描述

HTML5 History 模式

在这里插入图片描述
对前端而言，要将hash模式修改为history模式，只需要添加mode属性即可
在这里插入图片描述
友情提示：
对于history模式，需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器刷新时就会直接404了（使用history模式时不怕前进也不怕后退，就怕刷新…）所以呢，服务端需要增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

导航钩子–beforeEach,afterEach,Next()

beforeEach

当我们通过路由来切换组件时，网页的标题不会改变

但其实我们是希望他改变的，或者有这种需求，这时候我们就可以使用路由钩子函数BeforeEach方法，他会在路由改变前触发
在这里插入图片描述

Next()

Next方法可以设置参数
当我们参数为false时，就可以取消导航
当我们设置为具体的路径时可以导航到指定页面
在这里插入图片描述

AfterEach

afterEach方法在路由改变后触发，一些较为实用的例子为：

  1. 当我们有一个较长的页面内容的组件，将他滚动到某个位置，在跳转到另一个组件。滚动条默认是在上一个组件停留的位置，而此时如果我们想回到顶端就可以通过after钩子实现。（ window.scrollTo(0,0) ）
  2. 从一个页面过渡到另一个页面，可以出现一个全局的加载动画，等到新页面加载完成在结束动画
    在这里插入图片描述
BoomShaKa_S
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vueRouter路由详解：从入门到精通
01-08
Vue-Router 什么是路由？ 路由是根据不同的url地址展现不同的内容或页面。早期的路由都是后端直接根据url来重载页面实现的，即后端控制路由。后来页面越来越复杂，服务器压力越来越大，随着ajax（异步刷新技术）的...
详解vue-router 路由元信息
01-19
后端的手伸不过来啊，于是乎就一直在逛 vue-router 的官网，想着应该会有相关的东西，然后发现了路由元信息，起初怎么也没看懂是什么意思，后面慢慢琢磨明白了，记录一下 二、代码分析 官网路由元信息 （1）...
50、路由vue-router
sunnnnh的博客
06-10 2247
1、 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 　　点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。 　　路由中有三个基本的..
VueRouter之构建VueRouter对象以及new Vue涉及的处理
热门推荐
玉案轩窗的博客
07-19 1万+
前言 当程序加载执行完vue-router文件，就执行new VueRouter()动作以及new Vue()动作，本篇文章就是探究这两个过程对于路由具体的处理逻辑。 具体分析 new VueRouter() 在第一篇文章中的实例中，调用new VueRouter()来创建router对象，VueRouter()具体的处理逻辑如下： 从上面的处理逻辑中可以看出，new VueRout...
Vue路由（vue-router）详细讲解指南
精选资讯文章
06-05 6566
酷的同时也会给我们带来一些问题，因为使用路由参数时，从/user/xianyu导航到/user/mengxiang，原来的组件实例会被复用，两个路由都渲染同个组件，比起销毁再创建，显示复用显得效率更高，带来的的只管问题就是生命周期钩子函数不会再被调用，也就是不会再被触发；就这样，我们的页面就可以进行路由跳转和切换了，路由的基本使用就完成了；重定向实际上是当匹配到路径符合条件的时候去执行对应的路由，当然这个时候的url上面的地址显示的是对应的路由，页面也是对应的路由页面；
Vue学习之VueRouter的基本用法(多而全)
five-five
03-16 3359
重定向是指将一个路由重定向到另一个路由，可以是一个字符串或者一个路由配置对象。在Vue Router中，我们可以在路由配置中使用。路由元信息是指在路由配置中定义的一些额外信息，例如页面标题、页面描述、页面关键字等。命名路由是指在路由配置中为路由命名，以便在代码中使用。在Vue Router中，我们可以通过配置子路由来实现路由嵌套。在Vue Router中，我们可以在路由配置中使用冒号。这个方法会在每次路由跳转后执行，可以用来做一些页面切换后的处理，例如页面滚动到顶部等。在该函数中，可以指定返回的位置。
vue-router（路由）详细教程
m0_46484437的博客
04-22 2461
vue-router（路由）详细教程 一、Vue Router 回顾 1、路由简介 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 在开发中，路由分为： ​ 后端路由 ​ 前端路由 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RFfXWjYv-1682154131731)(images/后端路由.png)] SPA（Single
vue-router 路由基础的详解
08-29
Vue Router 是 Vue.js 应用中的官方路由库，它允许我们定义和管理应用中的路由，实现页面间的平滑导航。本文将深入讲解 Vue Router 的基础知识，包括起步、动态路由匹配和嵌套路由。 ### 一、起步 Vue Router 的...
vue-router路由模式详解(小结)
10-16
Vue Router 是 Vue.js 应用中的官方路由管理器，它允许我们通过 URL 来控制应用程序的导航。在本文中，我们将深入探讨 Vue Router 的路由模式，主要包括 Hash 模式和 History 模式。 1. **路由模式解析** Vue ...
Vue.js路由vue-router使用方法详解
10-20
Vue.js路由系统的核心在于vue-router，它是Vue.js官方的路由插件，使得在构建单页面应用（SPA）时能够轻松管理页面间的导航和组件的切换。Vue的SPA是基于路由和组件的，通过定义路径并将其与相应的组件关联，实现了...
Vue Router - 路由的使用、两种切换方式、两种传参方式、嵌套方式
CYK_byte的博客
10-17 3183
在创建 VueRouter 中，path 还有一个 children 参数，用来定义嵌套子组件路由.通过 Vue Router 可以将现有的 Vue 开发更灵活，使得一个页面中展示多个不同的组件.a）如下四种路由传参方式（推荐最后一种）之后你就可以直接写切换路由的方法了.例如 /login/cyk/1111。a）如下三种传参方式（推荐最后一种）a）例如通过点击事件，触发路由切换。在创建路由规则对象之后加入如下配置。3.点击提交后，回归用户列表路由。b）注册组件和创建路由规则。b）解决方法二：官方配置。
什么是vue-router，工作原理是什么
Hy_0452的博客
04-12 5782
一、vue-router是什么 路由就是SPA的路径管理器。vue-router是Vuejs官方的路由插件，它和vuejs是深度集成的，适用于构建单页面应用。vue的SPA是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。 传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。 二、vue-router实现原理 2.1 Hash模式 vue-router默认h
VueRouter
weixin_54671516的博客
10-29 411
路由(route)可以理解为是一组对应关系，多个路由需要同router进行管理，前端路由的对应关系是路径和组件,路由器（router）是用来管理路由的。
Vue Router基本用法
sleepwalker_1992的专栏
07-29 389
Vue路由器https://router.vuejs.org/ 路由-前端路由和后端路由的概念 路由-安装vue-router的两种方式 1、直接下载vue-router.js，利用script标签引入。 vue-router.js依赖vue.js，所以要注意引入顺序。 <script src="vue.js"></script> <!...
vue 路由
weixin_44453127的博客
01-14 103
vue 路由 路由分为 编程式路由和声明式路由 定义路由对象 const router = new VueRouter({ routes:[ { path: '/', name: '', // redirect: '/index', 路由重定向的位置（意思就是要把页面定向到哪一个页面） ...
vue-router 路由创建简单流程
weixin_49832841的博客
04-16 4492
一、什么是路由？ 二、使用步骤 1.创建项目 2.安装路由 3.创建文件 三.运行项目
Vue route：路由
qq_43450834的博客
09-06 261
1.理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。 2.前端路由：key是路径，value是组件。 ###1.基本使用 1.安装vue-router，命令：npmivue-router 2.应用插件：Vue.use(VueRouter) 3.编写router配置项: //引入VueRouter importVueRouterfrom'vue-router' //引入Luyou...
Vue-router 怎么配置路由
weixin_57066052的博客
08-25 1203
在 vue 中配置路由分为 5 个步骤，分别是： 1、安装 npm install --save vue-router 2、引用 import VueRouter from 'vue-router' 3、配置路由文件 var router = new VueRouter({ routes: [ {path:"/hello", component:HelloWorld }, {path:"/wen", component:HelloWen} ] new Vue({ el: '#app',
13_Vue全家桶 - Vue-Router详解.pptx
最新发布
01-25
"Vue-Router详解，前端路由的发展与应用" Vue-Router是Vue.js官方推荐的路由管理器，它使得在单页应用(SPA)中管理页面导航变得简单。随着前端技术的发展，路由管理从最初的后端路由逐渐演变为前端路由，这极大地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值