Vue2.X VueRouter

最新推荐文章于 2024-10-05 21:08:27 发布
原创 最新推荐文章于 2024-10-05 21:08:27 发布 · 344 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

这篇博客详细介绍了Vue Router的基础使用，包括基本配置、router-link组件的运用、参数传递、嵌套路由、命名视图以及如何通过Watch属性监听路由变化。通过实例展示了Vue Router在实际开发中的应用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue2.x VueRouter

写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！
学习来源： Vue + Vue-Cli 快速入门教程
李南江老师各平台账号：

  • 微博：极客江南
  • 微信公众号：李南江
  • 腾讯课堂： 李南江
  • 网易云课堂：李南江

VueRouter 基本使用

什么是Vue Router?
Vue Router和v-if v-show一样, 是用来切换组件的显示的
v-if v-show是标记来切换(true/false)
Vue Router用哈希来切换(#/xxx)
比v-if v-show强大的是Vue Router不仅仅能够切换组件的显示, 还能够在切换的时候传递参数

Vue Router使用
1、导入Vue Router

<script src="js/vue.js"></script>
<!--1.导入Vue Router-->
<!--注意点: 必须先导入Vue之后再导入Vue Router-->
<script src="js/vue-router.js"></script>

2、定义路由规则

// 1.定义组件
const one = {
    template: "#one"
};
const two = {
    template: "#two"
};
// 2.定义切换的规则(定义路由规则)
const routes = [
    // 数组中的每一个对象就是一条规则
    { path: '/one', component: one },
    { path: '/two', component: two }
];

3、根据路由规则创建路由对象

const router = new VueRouter({
	routes: routes
});

4、将路径对象挂载到Vue实例中

// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 4.将创建好的路由对象绑定到Vue实例上
    router: router,
    // 这里就是MVVM中的Model
    data: {
    },
    // 专门用于存储监听事件回调函数
    methods: {
    },
    // 专门用于定义计算属性的
    computed: {
    },
    // 专门用于定义局部组件的
    components: {
        one: one,
        two: two
    }
});

5、修改URL哈希值

<div id="app">
    <a href="#/one">切换到第一个界面</a>
    <a href="#/two">切换到第二个界面</a>
</div>

6、通过<router-view>渲染匹配的组件

<div id="app">
    <a href="#/one">切换到第一个界面</a>
    <a href="#/two">切换到第二个界面</a>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

组件代码：

<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>

VueRouter router-link

什么是router-link?
通过a标签确实能设置URL的hash,但是这种方式并不专业
在Vue Router中提供了一个专门用于设置hash的标签 router-link

router-link特点
默认情况下Vue会将router-link渲染成a标签, 但是我们可以通过tag来指定到底渲染成什么

给router-link设置选中样式
默认情况下我们可以通过重写router-link-active类名来实现设置选中样式
但是我们也可以通过linkActiveClass来指定选中样式

重定向路由
{ path: '被重定向值', redirect: '重定向之后的值' }

css代码：

*{
	margin: 0;
    padding: 0;
}
.onepage, .twopage{
    width: 500px;
    height: 500px;
}
.onepage{
    background: pink;
}
.twopage{
    background: skyblue;
}
/*.router-link-active{*/
/*    background: red;*/
/*}*/
.nj-active{
    background: skyblue;
}

html代码：

<div id="app">
    如果是通过router-link来设置URL的HASH值, 那么不用写#, 那么是通过to属性来设置HASH值
    -->
    <!--
    默认情况下Vue在渲染router-link的时候, 是通过a标签来渲染的
    如果在企业开发中不想使用a标签来渲染, 那么可以通过tag属性来告诉vue通过什么标签来渲染
    -->
    <router-link to="/one" tag="button">切换到第一个界面</router-link>
    <router-link to="/two" tag="button">切换到第二个界面</router-link>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

组件代码：

<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>

vue代码：

// 1.定义组件
const one = {
    template: "#one"
};
const two = {
    template: "#two"
};
// 2.定义切换的规则(定义路由规则)
const routes = [
    // 重定向路由
    { path: '/', redirect: '/two' },
    // 数组中的每一个对象就是一条规则
    { path: '/one', component: one },
    { path: '/two', component: two }
];
// 3.根据自定义的切换规则创建路由对象
const router = new VueRouter({
    routes: routes,
    // 指定导航激活状态样式类名
    linkActiveClass: "nj-active"
});

// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 4.将创建好的路由对象绑定到Vue实例上
    router: router,
    // 这里就是MVVM中的Model
    data: {
    },
    // 专门用于存储监听事件回调函数
    methods: {
    },
    // 专门用于定义计算属性的
    computed: {
    },
    // 专门用于定义局部组件的
    components: {
        one: one,
        two: two
    }
});

VueRouter 传递参数

Vue Router传递参数
只要将Vue Router挂载到了Vue实例对象上, 我们就可以通过vue.$route拿到路由对象
只要能拿到路由对象, 就可以通过路由对象拿到传递的参数

方式一: 通过URL参数参数(?key=value&key=value), 通过this.$route.query获取
方式二: 通过占位符传递(路由规则中/:key/:key, 路径中/value/value), 通过this.$route.params获取

html代码：

<div id="app">
    <!--
    第一种传递参数的方式: 通过URL参数的方式传递
    在指定HASH的时候, 通过?key=value&key=value的方式传递
    在传递的组件的生命周期方法中通过 this.$route.query的方式来获取
    -->
    <router-link to="/one?name=lnj&age=33" tag="button">切换到第一个界面</router-link>
    <!--
    第二种传递参数的方式: 通过路由规则中的占位符传递
    在指定路由规则的时候通过/:key/:key的方式来指定占位符
    在指定HASH的时候, 通过/value/value的方式来传递值
    在传递的组件的生命周期方法中通过 this.$route.params的方式来获取
    -->
    <router-link to="/two/zs/66" tag="button">切换到第二个界面</router-link>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

组件代码：

<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>

vue代码：

// 1.定义组件
const one = {
    template: "#one",
    created: function () {
        console.log(this.$route);
        console.log(this.$route.query.name);
        console.log(this.$route.query.age);
    }
};
const two = {
    template: "#two",
    created: function () {
        console.log(this.$route);
        console.log(this.$route.params.name);
        console.log(this.$route.params.age);
    }
};
// 2.定义切换的规则(定义路由规则)
const routes = [
    // 数组中的每一个对象就是一条规则
    { path: '/one', component: one },
    { path: '/two/:name/:age', component: two }
];
// 3.根据自定义的切换规则创建路由对象
const router = new VueRouter({
    routes: routes,
    linkActiveClass: "nj-active"
});
// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 4.将创建好的路由对象绑定到Vue实例上
    router: router,
    // 这里就是MVVM中的Model
    data: {
    },
    // 专门用于存储监听事件回调函数
    methods: {
    },
    // 专门用于定义计算属性的
    computed: {
    },
    // 专门用于定义局部组件的
    components: {
        one: one,
        two: two
    }
});

切换到第一个页面
在这里插入图片描述
切换到第二个页面
在这里插入图片描述

VueRouter 嵌套路由

什么是嵌套路由?
嵌套路由也称之为子路由, 就是在被切换的组件中又切换其它子组件
例如: 在one界面中又有两个按钮, 通过这两个按钮进一步切换one中的内容

html代码：

<div id="app">
    <router-link to="/one" tag="button">切换到第一个界面</router-link>
    <router-link to="/two" tag="button">切换到第二个界面</router-link>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

组件代码：

<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
        <router-link to="/one/onesub1" tag="button">切换到第一个子界面</router-link>
        <router-link to="/one/onesub2" tag="button">切换到第二个子界面</router-link>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</template>
<template id="onesub1">
    <div class="onesub1page">
        <p>我是第一个界面子界面1</p>
    </div>
</template>
<template id="onesub2">
    <div class="onesub2page">
        <p>我是第一个界面子界面2</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>

vue代码：

// 1.定义组件
const onesub1 = {
    template: "#onesub1",
};
const onesub2 = {
    template: "#onesub2",
};
const one = {
    template: "#one",
    components:{
        onesub1:onesub1,
        onesub2: onesub2
    }
};
const two = {
    template: "#two"
};
// 2.定义切换的规则(定义路由规则)
const routes = [
    // 数组中的每一个对象就是一条规则
    {
        path: '/one',
        component: one,
        children:[
            {
                // 注意点: 如果是嵌套路由(子路由), 那么不用写一级路径的地址, 并且也不用写/
                path: "onesub1",
                component: onesub1
            },
            {
                // 注意点: 如果是嵌套路由(子路由), 那么不用写一级路径的地址, 并且也不用写/
                path: "onesub2",
                component: onesub2
            }
        ]
    },
    // { path: '/one/onesub1', component: onesub1 },
    // { path: '/one/onesub2', component: onesub2 },
    { path: '/two', component: two }
];
// 3.根据自定义的切换规则创建路由对象
const router = new VueRouter({
    routes: routes,
    linkActiveClass: "nj-active"
});
// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 4.将创建好的路由对象绑定到Vue实例上
    router: router,
    // 这里就是MVVM中的Model
    data: {
    },
    // 专门用于存储监听事件回调函数
    methods: {
    },
    // 专门用于定义计算属性的
    computed: {
    },
    // 专门用于定义局部组件的
    components: {
        one: one,
        two: two
    }
});

VueRouter 命名视图

什么是命名视图?
命名视图和前面讲解的具名插槽很像, 都是让不同的出口显示不同的内容
命名视图就是当路由地址被匹配的时候同时指定多个出口, 并且每个出口中显示的内容不同

html代码：

<div id="app">
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <!--和匿名插槽一样, 如果指定了多个router-view, 那么当路由地址被匹配之后, 多个router-view中显示的内容是一样的-->
    <!--<router-view></router-view>
    <router-view></router-view>-->
    <!--和具名插槽一样, 如果想同时显示多个不同的组件, 那么可以给出口指定名称
        1.在路由规则中给组件起名称
        2.在出口中指定显示哪个名称的组件-->
    <router-view name="name1"></router-view>
    <router-view name="name2"></router-view>
</div>

组件代码：

<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>

vue代码：

// 1.定义组件
const one = {
    template: "#one",
};
const two = {
    template: "#two"
};
// 2.定义切换的规则(定义路由规则)
const routes = [
    // 数组中的每一个对象就是一条规则
    {
        path: '/',
        components: {
            name1: one,
            name2: two
        }
    },
];
// 3.根据自定义的切换规则创建路由对象
const router = new VueRouter({
    routes: routes,
    linkActiveClass: "nj-active"
});
// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 4.将创建好的路由对象绑定到Vue实例上
    router: router,
    // 这里就是MVVM中的Model
    data: {
    },
    // 专门用于存储监听事件回调函数
    methods: {
    },
    // 专门用于定义计算属性的
    computed: {
    },
    // 专门用于定义局部组件的
    components: {
        one: one,
        two: two
    }
});

VueRouter Watch 属性

什么是Watch属性?
Watch属性是专门用于监听数据变化的, 只要数据发生了变化, 就会自动调用对应数据的回调方法

Watch监听路由变化
Watch属性不仅仅能够监听数据的变化, 还能够监听路由地址的变化
在企业开发中我们可以通过Watch来判断当前界面是从哪个界面跳转过来的

html代码：

<div id="app">
    <a href="#/one">切换到第一个界面</a>
    <a href="#/two">切换到第二个界面</a>
    <router-view></router-view>
</div>

组件代码：

<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>

vue代码：

// 1.定义组件
const one = {
    template: "#one",
};
const two = {
    template: "#two"
};
// 2.定义切换的规则(定义路由规则)
const routes = [
    // 数组中的每一个对象就是一条规则
    { path: '/one', component: one },
    { path: '/two', component: two }
];
// 3.根据自定义的切换规则创建路由对象
const router = new VueRouter({
    routes: routes
});

// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 4.将创建好的路由对象绑定到Vue实例上
    router: router,
    watch: {
        // 可以通过watch监听Model中数据的变化, 只要数据发生变化, 就会自动调用对应的回调函数
      num1: function (newValue, oldValue) {
          // console.log(this.num1);
          // console.log(newValue, oldValue);
          this.res = parseInt(this.num1) + parseInt(this.num2)
      },
      num2: function (newValue, oldValue) {
          this.res = parseInt(this.num1) + parseInt(this.num2)
      },
        // 可以通过watch监听路由地址的变化, 只要路由地址发生变化, 就会自动调用对应的回调函数
      "$route.path": function (newValue, oldValue) {
          console.log(newValue, oldValue);
      }
    },
    // 这里就是MVVM中的Model
    data: {
        num1: 0,
        num2: 0,
        res: 0
    },
    // 专门用于存储监听事件回调函数
    methods: {
        change1(){
            this.res = parseInt(this.num1) + parseInt(this.num2)
        },
        change2(){
            this.res = parseInt(this.num1) + parseInt(this.num2)
        }
    },
    // 专门用于定义计算属性的
    computed: {
    },
    // 专门用于定义局部组件的
    components: {
        one: one,
        two: two
    }
});
console.log(vue.$route);
【Vue2】06 - vue路由和VueRouter
qq_43350524的博客
04-29 987
【Vue2】06 - vue路由和VueRouter
一个基于Vue2xVueRouter的简单项目
08-10
一个基于Vue2.x Vue-Router的简单项目
vue2路由
weixin_56632577的博客
05-05 385
路由 路由(英文：route)就是对应关系， 路由分为前端路由和后端路由，比如前端路由就是，Hash 地址与组件之间的对应关系。 具体来说：一个路由就是一组key-value的对应关系 key 为 url 路径 value 可能是函数function 或 组件component 多个路由，需要经过路由器(英文：router)管理 后端路由 后端路由概念 理解：value 是 函数function, 用于处理客户端提交的请求。 工作过程：服务器接收到一个请求时，根据用户请求
学习vue2教程中的简单路由
weixin_33787529的博客
03-03 138
这是实例的代码 作为一个新手，本文谈的是我在学习 vue-2.0-simple-routing-example 的一些理解。操作系统为 win7，以下： 环境部分 下载好程序包后，解压到任意的盘，假设 e 盘。然后打开 cmd,跳往项目路径，输入 cd e:\vue-2.0-simple-routing-example-master 回车...
Vue2x 搭建vue-router
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-05 1952
vue-router是Vue.js的官方路由管理器。它允许你在同一个页面中通过URL的变化来展示不同的组件，从而实现SPA的功能。vue-router提供了多种方式来定义路由规则、导航守卫和路由元信息等。
vue-router理解及使用(基于vue2.x)--01
weixin_43431123的博客
01-27 480
vue-router理解及使用 为什么会有前端路由？ 1.在我们最开始开发的时候，可能前后端是一体化的，需要我们后端人员使用jsp模板引擎渲染出我们的页面，直接返回给浏览器。 2. 到了后期，又前端人员，编写html+js+css，客户通过浏览器请求这些静态文件，访问数据时，可以使用ajax等技术，向后端请求数据，再通过js动态的把数据插入到html中，这样也不太好，每个页面我们都要对应的写一套html+css+js。 3.现在我们通过vue框架，也可以动态的显示数据了，因为vue存在了一个核心，叫做组件
vue3.x中使用cesium，vue3.x+Cesium
05-04
同时，还可以结合其他的Vue插件，如Vuex管理状态，Vue Router进行页面跳转，实现更复杂的业务逻辑。 通过以上步骤，你可以在Vue3.x项目中成功集成Cesium，构建出具有3D地图功能的应用。记住，理解和掌握Cesium的API...
vue2.x.zipVue源码
11-26
在这个压缩包“vue2.x.zip”中，我们可以深入理解Vue 2.x的核心实现，探讨其设计理念和内部工作机制。 1. **响应式系统**： Vue 2.x 的核心特性之一是它的响应式系统，基于数据劫持和发布订阅模式。当数据对象中的...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
4. **Vue Router 4.x**：Vue Router 4.x 配置路由时，主要涉及`createRouter`和`createWebHistory`方法。路由定义包括 path、component、props、beforeEnter 等选项。还可以使用 `router-link` 和 `router-view` ...
Vue-Router2.X多种路由实现方式总结
01-21
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-router 一、使用路由 在main.js中，需要明确安装路由功能： import ...
vueSocketChatroom：vue2.x + vue-router2.x + vuex2.x + vux2.x + express + socket.io立即聊天室
02-05
节点7.x 自动重启节点服务器工具 npm i -g nodemon 质量检查工具 为代码编辑器安装eslint插件（例如vscode中的“ eslint”） 下载 # clone git clone git@github.com:Chanran/vueSocketChatroom.git cd ...
16 vue2.x 搭建vue-router
黄彪博客
01-22 386
文章目录安装Vue-router 依赖包案例说明compiler（模板）模式和runtime模式 ？参考开发为了方便，使用 runtime-compiler 模式的方式？ 安装Vue-router 依赖包 npm install vue-router 案例说明 配置路由 // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) imp...
Vue2 路由
03-07 713
vue-router 2.0 改变的内容 原文 https://segmentfault.com/a/1190000006623100 主题 软件开发 2.x 版本的 vue-router 相比之前的0.7.x版本，有很多破坏性改变：通用 API 的修改The old router.go() is now router.push() .新的 router.go 类似 window.histo
Vue2.路由
切图仔
04-27 4072
前端路由（Hash 地址与组件之间的对应关系） SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现。 结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！ 1.前端路由的工作方式 ① 用户点击了页面上的路由链接 ② 导致了 URL 地址栏中的 Hash 值发生了变化 ③ 前端路由监听了到 Hash 地址的变化 ④ 前端路由把当前 Hash 地址对应的组
Vue-2 路由
qq_17368835的博客
07-08 288
本系列记录一些vue学习中的心得
vue2-路由
weixin_50402587的博客
05-31 518
在方法里面跳转页面 vue的路由模式? hash history hash模式会在url上显示’#'，而history模式没有 刷新页面时，hash模式可以正常加载到hash值对应的页面，history模式没有处理的话，会返回404，一般需要后端将所有页面都配置重定向到首页路由 兼容性上，hash模式可以支持低版本浏览器和IE== vue-Router中有哪些导航守卫?== 「全局前置钩子」：beforeEach,beforeResolve,afterEach 「路由独享守卫」：beforeEnter
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值