广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue路由vue-router用法讲解
  • 219

0
分享到

Vue路由vue-router用法讲解

2024-04-02 19:04:59 219人浏览 泡泡鱼
摘要

目录一、Vue-router1、简介2、使用流程二、基本路由实现三、嵌套路由四、缓存路由组件1、为什么使用2、如何使用3、完整代码五、传递参数1、通过url传递（param传递）2、

一、vue-router

1、简介

（1）SPA：Single Page Application（单页应用），简单理解就是只有一个WEB页面的应用。即加载单个html页面，并根据用户与程序的交互 动态更新页面的 web应用程序。其加载页面时不会加载整个页面，只是更新部分内容。

（2）路由：指的是SPA的路径管理器。SPA基于路由与组件，其中路由指定访问路径，并建立路由与组件的映射关系。通过切换路由，从而加载不同的组件。

2、使用流程

step1：安装路由

【命令行输入】
npm install vue-router --save

step2：引入路由

【main.js】
// 引入vue-router
import VueRouter from 'vue-router';

// 使用vue-router
Vue.use(VueRouter);

step3：创建路由对象并声明路由规则（创建路由）

new VueRouter({
    routes: [
        //一个个对象
        { path: '/home', component: Home }，
        { path: '/about', component: About }
    ]
});

step4：将router实例传入 Vue实例中（注册路由）

new Vue({
  router: router,      // 使用路由对象
  render: h => h(App),
}).$mount('#app')

step5：使用路由

// 选择路由
<router-link to='/about'>About</router-link>
<router-link to='/home'>Home</router-link>

// 映射组件
<router-view></router-view>

二、基本路由实现

（1）文件结构：

（2）完整代码:

【main.js】
import Vue from 'vue'
import App from './App.vue'

// 引入路由对象
import router from './router/router.js'

Vue.config.productionTip = false

new Vue({
    router: router,      // 使用路由对象
  render: h => h(App),
}).$mount('#app')



【App.vue】
<template>
    <div>
        <div>
            <router-link to='/about'>About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
    }
</script>

<style>

</style>


【About.vue】
<template>
    <div>About</div>
</template>

<script>
</script>

<style>
</style>


【Home.vue】
<template>
    <div>Home</div>
</template>

<script>
</script>

<style>
</style>


【router.js】
// 引入组件
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'

// 使用组件
Vue.use(VueRouter)

// 向外抛出一个VueRouter
export default new VueRouter ({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        },
        // 默认选中About组件
        {
            path: '/',
            redirect: '/about'
        },
    ]
})

（3）截图：局部刷新组件的效果

点击Home可以切换到Home组件，url路径变。

点击About可以切换到About组件，url路径变。

三、嵌套路由

路由中套路由。
（1）文件结构

（2）完整代码

【在基本路由的基础上修改代码，给Home组件中 套个路由】
【router.js】
// 引入组件
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'

// 使用组件
Vue.use(VueRouter)

// 向外抛出一个VueRouter
export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            // 使用 children 定义 子路由
            children: [{
                    path: '/home/news',
                    component: News
                },
                {
                    path: 'message', // 简写
                    component: Message
                },
                // 默认选中 News组件
                {
                    path: '', // 简写
                    redirect: '/home/news'
                },
            ]
        },
        {
            path: '/',
            redirect: '/about'
        }
    ]
})



【Home.vue】
<template>
    <div>
        <div>
            <h1>Home</h1>
            <router-link to='/home/news'>News</router-link>
            <br/>
            <br/>
            <router-link to='/home/message'>Message</router-link>
        </div>
        <br/>
        <br/>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
</script>

<style>
</style>


【Message.vue】
<template>
    <div>Message</div>
</template>

<script>
</script>

<style>
</style>


【News.vue】
<template>
    <div>News</div>
</template>

<script>
</script>

<style>
</style>

（3）测试截图：
初始画面，默认选中 About组件

点击Home组件，默认选中News组件。

点击Message组件。

四、缓存路由组件

1、为什么使用

默认情况下，切换路由时，被切换的路由会被销毁，当重新切回时会被再次创建。如果想要保留之前的修改，可以使用缓存路由组件对象，缓存之前的修改。

2、如何使用

【原写法】
<router-view></router-view>

【修改后】
<keep-alive>
    <router-view></router-view>
</keep-alive>

3、完整代码

【对上述代码进行修改，增加一个文本框】

【App.vue】
<template>
    <div>
        <div>
            <router-link to='/about'>About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
    }
</script>

<style>

</style>


【About.vue】
<template>
    <div>
        About
        <input type="text" />
    </div>
</template>

<script>
</script>

<style>
</style>

截图：
初始界面：

输入数据：

切换到Home组件

再切回About组件，值没有被清除。

五、传递参数

1、通过url传递（param传递）

使用 冒号 + 参数名（:name）作为 占位符，并通过url 传递参数，使用$route.params接收参数。

【对上面代码进行修改】

【router.js】
// 引入组件
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'

// 使用组件
Vue.use(VueRouter)

// 向外抛出一个VueRouter
export default new VueRouter({
    routes: [{
            path: '/about/:name/:age',
            component: About
        },
        {
            path: '/home',
            component: Home
        },
        {
            path: '/',
            redirect: '/home'
        }
    ]
})


【App.vue】
<template>
    <div>
        <div>
            <router-link to='/about/tom/22'>About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
    }
</script>

<style>

</style>


【About.vue】
<template>
    <div>
        About
        <br />
        name: {{$route.params.name}}
        <br />
        age: {{$route.params.age}}
    </div>
</template>

<script>
</script>

<style>
</style>


【Home.vue】
<template>
    <div>
        <h1>Home</h1>
    </div>
</template>

<script>
</script>

<style>
</style>

截图：
初始界面

点击About，可以传递并接收参数

2、通过query传递

使用path匹配路由，并根据name定位路由，通过query传递参数，并使用$route.query接收参数。

【对上面代码进行修改】

【router.js】
// 引入组件
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'

// 使用组件
Vue.use(VueRouter)

// 向外抛出一个VueRouter
export default new VueRouter({
    routes: [{
            path: '/about',
            name: 'About',
            component: About
        },
        {
            path: '/home',
            component: Home
        },
        {
            path: '/',
            redirect: '/home'
        }
    ]
})


【About.vue】
<template>
    <div>
        About
        <br />
        name: {{$route.query.name}}
        <br />
        age: {{$route.query.age}}
    </div>
</template>

<script>
</script>

<style>
</style>


【App.vue】
<template>
    <div>
        <div>
            <!--需要使用  :to-->
            <router-link :to="people">About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
        data() {
            return {
                people: {name: 'About', query: {name: 'jarry', age: '32'}}
            }
        }
    }
</script>

<style>

</style>

截图：
初始画面：

点击About，可以传递参数

3、通过param传递

与query类似，用name定位路由，但是通过 param传递参数，并使用$route.params接收参数。

【修改上面的文件】

【App.vue】
<template>
    <div>
        <div>
            <!--需要使用  :to-->
            <router-link :to="people">About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
        data() {
            return {
                people: {name: 'About', params: {name: 'jarry', age: '32'}}
            }
        }
    }
</script>

<style>

</style>


【About.vue】
<template>
    <div>
        About
        <br />
        name: {{$route.params.name}}
        <br />
        age: {{$route.params.age}}
    </div>
</template>

<script>
</script>

<style>
</style>

截图：
初始画面：

点击About，参数传递正常。

六、$route 与 $router 的区别

1、$route

$route 指的是 路由信息的对象，其包含的是 路由的相关信息。比如：path，name，fullPath，query，params，meta。

  • （1）$route.path 与 $route.fullPath

对应当前路由的路径。

  • （2）$route.query 与 $route.params

都属于 key-value对象，表示url 传递的参数。

  • （3）$route.name

指的是当前路由的名字。

2、$router

$router 指的是 路由实例的对象，即new VueRouter创建的实例。其包含了常用的方法（比如 push()，replace()， back()等方法）。

  • （1）$router.push()

使用 push 方法可以向 浏览器的 history 栈中添加一个新的记录，当点击浏览器的返回按钮 或 触发 back 方法时，可以返回之前的页面。

  • （2）$router.replace()

使用 replace 方法 不会向 history中添加记录，而是替换当前的记录，此时点击后退按钮不会返回之前的页面。

3、跳转路由的三种形式

（1）通过标签实现。

<router-link> + <router-view> 实现。

（2）通过js代码实现。（可以传递参数，增加一个 query属性即可）

this.$router.replace({ path:'/Login'})   
this.$router.replace({ path:'/Login', query: {name: 'tom'})

（3）通过js代码实现。

this.$router.push({ path:'/Login'})

到此这篇关于Vue路由vue-router用法讲解的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue路由vue-router用法讲解

本文链接: https://www.lsjlt.com/news/163421.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • Vue路由vue-router用法讲解
    目录一、vue-router1、简介2、使用流程二、基本路由实现三、嵌套路由四、缓存路由组件1、为什么使用2、如何使用3、完整代码五、传递参数1、通过url传递（param传递）2、...
    99+
    2022-11-13
  • Vue路由vue-router详细讲解指南
    中文文档：https://router.vuejs.org/zh/ Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如...
    99+
    2022-11-12
  • Vue路由router详解
    目录模块化的方式使用路由插件使用路由声明式导航编程式导航动态路由匹配通配符匹配路径查询参数query响应路由参数的变化命名路由，路由别名，重定向嵌套路由命名视图导航守卫（1）全局守卫...
    99+
    2022-11-12
  • 详解Vue router路由
    目录1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由6.路由的params参数 7.路由的props配置 8.编程式路由导航 ...
    99+
    2022-11-12
  • Vue路由vue-router怎么用
    这篇文章主要为大家展示了“Vue路由vue-router怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue路由vue-router怎么用”这篇文章吧。一、vue-router1、简介（1...
    99+
    2023-06-29
  • 详解Vue-router嵌套路由
    目录步骤1.配置路由规则，使用children配置项：2.跳转（要写完整路径）：总结 步骤 1.配置路由规则，使用children配置项： routes:[ { path:...
    99+
    2022-11-12
  • Vue router 路由守卫详解
    目录一、全局前置beforeEach1.全局前置beforeEach2.实现二、需求二三、全局后置守卫afterEach1.修改title为自己的title四、组件内守卫1.befo...
    99+
    2022-11-12
  • Vue--Router动态路由的用法示例详解
    目录官网网址动态路由概述同一路由多个参数path-to-regexpApi用法1. pathToRegexp()2、exec()3. parse()4. compile()本文介绍V...
    99+
    2022-11-13
    Vue Router动态路由 Vue Router路由 Vue Router动态路由用法
  • Vue router路由有什么用
    这篇文章主要为大家展示了“Vue router路由有什么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue router路由有什么用”这篇文章吧。1.基本使用 2.几个注意点&nb...
    99+
    2023-06-25
  • 什么是Vue-Router路由
    这篇文章给大家介绍什么是Vue-Router路由，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。Vue Router是Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发...
    99+
    2023-06-22
  • Router添加路由拦截方法讲解
    目录前言一、安装React Router v6二、创建Route组件三、添加路由拦截总结前言 随着Web应用程序的复杂性不断增加，保护用户数据和应用程序的安全变得越来越重要。这就要求...
    99+
    2023-03-14
    Router添加路由拦截 React路由拦截
  • vue router路由跳转方法是什么
    本文小编为大家详细介绍“vue router路由跳转方法是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue router路由跳转方法是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。通过router-...
    99+
    2023-07-06
  • 解决vue路由组件vue-router实例被复用问题
    最近在开发过程中遇到如下问题: 当前路由是这样的 http://127.0.0.1:3010/orderkeywords=22 只改变keywords的值，路由不跳转 http://...
    99+
    2022-11-13
  • Vue.js中如何使用vue-router路由
    本篇文章为大家展示了Vue.js中如何使用vue-router路由，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。vue-router是Vue.js官方的路由插件，它...
    99+
    2022-10-19
  • Vue3 中路由Vue Router 的使用实例详解
    目录前言：一、什么是 Vue Router ？二、路由的使用1、路由的安装2、路由的模式3、创建路由模块4、声明路由链接和占位符三、路由的重定向和别名四、嵌套路由五、声明式和编程式导...
    99+
    2023-02-18
    Vue3 路由Vue Router使用 Vue Router使用
  • vue中的vue-router路由模式有哪些
    这篇文章将为大家详细讲解有关vue中的vue-router路由模式有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。vue-router 路由模式有几种？　Hash:&...
    99+
    2022-10-19
  • vue-router路由的示例分析
    这篇文章将为大家详细讲解有关vue-router路由的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。官方文档：旧版：https://github.com/vuej...
    99+
    2022-10-19
  • 分析Vue-Router路由与配置
    这篇文章主要介绍“分析Vue-Router路由与配置”，在日常操作中，相信很多人在分析Vue-Router路由与配置问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”分析Vue-...
    99+
    2022-10-19
  • vue-router路由跳转问题replace
    目录vue-router路由跳转replacevue router路由跳转方法概述一、概述二、跳转方法三、路由中params和query的区别vue-router路由跳转replac...
    99+
    2022-11-13
  • Vue中的Router路由是什么
    这篇文章主要讲解了“Vue中的Router路由是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中的Router路由是什么”吧！一、前端路由的概念与原理（1）什么是路由路由（英文：r...
    99+
    2023-06-30
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作