Vue路由vue-router用法讲解

目录
  • 一、vue-router
    • 1、简介
    • 2、使用流程
  • 二、基本路由实现
  • 三、嵌套路由
  • 四、缓存路由组件
    • 1、为什么使用
    • 2、如何使用
    • 3、完整代码
  • 五、传递参数
    • 1、通过url传递(param传递)
    • 2、通过query传递
    • 3、通过param传递
  • 六、$route 与 $router 的区别
    • 1、$route
    • 2、$router
    • 3、跳转路由的三种形式

一、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用法讲解的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-01-22

一篇超详细的Vue-Router手把手教程

目录 1,router-view 2,router-link 3,重定向redirect 4,路由别名 5,路由传参props 5.1,布尔模式 5.2,对象模式 5.3,函数模式 6,路由守卫 6.1,全局前置守卫beforeEach 6.2,全局解析守卫beforeResolve 6.3,全局后置钩子afterEach 6.4,路由独享守卫beforeEnter 6.5,组件内的守卫 6.6,完整的导航解析流程 7,路由元信息 8,过渡动效 9,滚动行为 10,完整路由配置 总结 最近在重温

vue-router 4使用实例详解

目录 一.安装并创建实例 二.vue-router4 新特性 2.1.动态路由 2.2.与 composition 组合 三.导航守卫 3.1.全局守卫 3.2.路由独享守卫 3.3.组件内的守卫 四.vue-router4 发生破坏性变化 4.1.实例创建方式 4.2.模式声明方式改变 4.3.base属性被合并 4.4.通配符 * 被取消 4.5.isReady() 替代 onReady 4.6.scrollBehavior 变化 4.7.keep-alive 和 transition 必须

Vue-router路由该如何使用

一.说明 Vue Router是Vue.js官方的路由管理器.它和Vue.js的核心深度集成, 让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于Vue js过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的CSS class的链接 HTML5 历史模式或hash模式, 在IE 9中自动降级 自定义的滚动行为 二.安装 基于第一个vue-cli进行测试学习: 先查看node modules中是否存在vue-route

详解Vue-Router的安装与使用

目录 安装 路由的基础配置 将Router安装到Vue中 Router的相关配置 Router.routes 的相关配置 实现一个简单的路由 1.配置路由 2. 在组件中实现路由 1. router-link 用于实现路由的跳转组件:该组件支持的属性 2. router-view 根据当前VueRouter的配置,当路由路由路径发生改变时渲染对应的路由视图组件 安装 1.在已有Vue项目中手动安装vue-router npm install --save vue-router 2.使用vue-c

详解Vue-router嵌套路由

目录 步骤 1.配置路由规则,使用children配置项: 2.跳转(要写完整路径): 总结 步骤 1.配置路由规则,使用children配置项: routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { path:'news', //此处一定不要写:/news component:News }, { path:'message',//

Vue-Router的routes配置详解

目录 介绍 routes中对象属性 path: string component : Component | () => import(组件) name: string redirect: string | Location | Function props: boolean | Object | Function alias:  string| Array[string] children?: Array[RouteConfig] beforeEnter: (to: Route, from:

vue3+TypeScript+vue-router的使用方法

目录 简单使用 创建项目 vue-cli创建 vite创建 安装vue-router 创建/修改组件 修改入口ts 启动vue 在浏览器中访问 文件结构图片 综合使用 动态参数 使用watch监听动态参数 使用组合API监听动态参数 重定向 命名与别名 命名路由 命名视图 别名 嵌套路由 编程式路由 简单使用 创建项目 vue-cli创建 $npm install -g @vue/cli $vue --version @vue/cli 4.5.15 $vue create my-project

vue-router 基于后端permissions动态生成导航菜单的示例代码

目录 Vue.js 1.注册全局守卫 2.Vuex状态管理 全局缓存routes 3.路由拦截 4.路由菜单 5.递归菜单vue组件 Vue.js vue-router vuex 1.注册全局守卫 核心逻辑 1.token身份验证(后端) => token失效返回登录页面 2.获取用户权限 3.校验permissions,动态添加路由菜单 router.beforeResolve 注册一个全局守卫.和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路

vue3使用vue-router的完整步骤记录

前言 对于大多数单页应用程序而言,管理路由是一项必不可少的功能.随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的. Vue3中的许多更改都会稍微改变我们访问插件和库的方式,其中包括Vue Router. 一.第一步:安装vue-router npm install vue-router@4.0.0-beta.13 二.第二步:main.js 先来对比一下vue2和vue3中main.js的区别:(第一张为vue2,第二张为vue3) 可以

Vue路由vue-router详细讲解指南

中文文档:https://router.vuejs.org/zh/ Vue Router 是Vue.js官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转: 首先我们来学习三个单词(route,routes,router): route:首先它是个单数,译为路由,即我们可以理解为单个路由或者某一个路由: routes:它是个复数,表示多个的集合才能为复数:即我们可以理解为

vue-Router安装过程及原理详细

目录 1.前端路由实现原理 2.vue-Router 基本使用 2.1.安装 2.2.配置路由 2.3.实例化 2.4.挂载路由 2.5.页面上添加 router-link 和 router-view 3.router 的模式 3.1.hash 模式 3.2.history 模式 4.router-link的属性 4.1.tag 属性 4.2.replace 属性 4.3.active-class 5.vue-Rrouter 页面跳转方式 5.1.router-link 实现 5.2.通过 js

python中pygame安装过程(超级详细)

安装时是需要设置python环境变量的,下载python的时候底下有个小框框(没有默认选中) Add Python 3.7 to PATH需要选择的,如果没有选择的话,需要自己设置,我一般比较懒,卸载了python重新下载的,让下载器自动设置. 然后是python版本问题 有人疑问这是64位还是32位,看那个[64bit]是64位,至于后面的on32是在windows上使用的意思,在Linux上使用就显示别的了. 然后检查pip的安装 如果显示No module named -pip 那么就是p

windows下oracle 11g r2 安装过程与卸载详细图解

Oracle 11g安装 1.解压下载的包,然后进入包内,点击setup.exe开始安装 . 2.出现如下:一般把那个小对勾取消,点击下一步进行, 弹出下图这个后点'是' 3.下图后,选择创建和配置数据库,点击下一步. 4.下图,选择服务器类,因为桌面类没有高级选项的功能,下一步. 5.下图,选择单实例数据库,下一步 6.下图,选择高级安装,下一步 7,下图选择语言,如果数据库内没有用到其他的语言,就这样默认的就可以了,下一步 8.下图,选择安装版本,用企业版的,下一步 9.下面,选择基目录的时

Vue Router history模式的配置方法及其原理

vue-router分为 hash和 history模式,前者为其默认模式,url的表现形式为 http://yoursite.com#home,比较难看.后者的url表现形式为 http://yoursite.com/home,比较美观. 但如果要使用 history模式,我们需要在后端进行额外配置.本文将讨论如何配置以及为什么要这样配置. history模式的配置方法 我们来看看官方文档是教我们怎么配置的:HTML5 History 模式. 首先要将 mode设置为 history: con

vue中npm包全局安装和局部安装过程

全局安装是将npm包安装在你的node安装目录下的node_modules文件夹中.在windows和mac中,全局安装的默认路径是不同的.在mac中默认是安装到 /usr/locla/lib 中.在windows默认安装目录是 C:\Program Files\nodejs ,当然你也可以通过一下命令来查看全局安装路径. // 查看全局安装路径 npm root -g // 查看npm的基础设置 npm config ls // 查看安装目录路径 npm config get prefix 全

共创桌面Linux 2005光盘启动安装过程详细图解

北京共创开源软件有限公司在2004年10月25日发布Co-CreateLinux2005版操作系统,这一版本是今年6月发布的Co-CreateLinux1.0.3的后继版本,是一个全新的版本.    共创桌面Linux 2005(ISO镜像文件)下载地址:    ftp://ftp.opendesktop.net/co-create/desktop/2005/Baby2-i386-disc.iso 一.共创桌面Linux 2005安装    将光驱设为第一启动盘,放入"共创桌面Linux 200

mysql5.7.19 zip 详细安装过程和配置

MySQL v5.7.19 官方正式版(32/64位 安装版与zip解压版) 1.解压放到指定文件夹   例如:E:\mysql-5.7.19-winx64 2.配置环境变量,在path中放入:E:\mysql-5.7.19-winx64\bin 3.在E:\mysql-5.7.19-winx64中,新建空的文件夹data 4.在E:\mysql-5.7.19-winx64中,新建一个my.ini,对mysql进行配置 [mysql] # 设置mysql客户端默认字符集 default-char

各种Python库安装包下载地址与安装过程详细介绍(Windows版)

在用Python开发时(Windows环境),会碰到需要安装某个版本的第三方库,为了以后查找.安装方便,总结如下: windows版的各种Python库安装包下载地址: http://www.lfd.uci.edu/~gohlke/pythonlibs/ 一.打开cmd 二.将cmd当前目录切换到Downloads,命令为cd Downloads 三.在文章开头链接地址下载所需第三方库,以SciPy为例:0.18.1是库版本号:cp27.cp35分别对应Python2.7.Python3.5:w

Vue项目中使用Vux的安装过程

最近想用vue+vux写一个项目,于是到vux的官网看了文档开始着手搭建项目,但是遇到一些坑.下面简单说下安装vux 的过程. 默认已安装vue环境 1.安装vux npm install vux --save-dev 2.安装vux-loader npm install vux-loader --save-dev //官网没提安装这个,但是不安装会报错 3.安装less-loader以正确编译less源码 npm install less less-loader --save-dev 4.安装

win10安装JDK14.0.2的详细安装过程

在Java官网下载最新版的JDK,JDK网址 点击JDK Download,进入下载页面. 选择exe文件下载,等待下载完成. 下载完后,双击jdk-14.0.2_windows-x64_bin.exe,进行安装. 点击下一步 这里我将Java安装到H盘的一个JAVA目录下,文件夹最好用英文命名,这样方便后面的环境配置. 单击下一步.安装完成后,这只是完成了Java安装的一半. 接下来进行环境变量的配置. 因为jdk14.0.2中安装完成以后,目录下没有jre文件夹,我们必须手动生成一个: 使用

Windows longhorn长牛角4074英文测试版光盘安装过程详细图解

Windows longhorn4074英文测试版是微软在2004年5月发布的.longhorn4074英文测试版的最低系统安装条件为∶安装系统所在分区空间3G以上(刚安装完时已用2.54G).CPU最低PII(1G以上).内存256M以上.longhorn4074英文测试版没有提供在DOS下安装程序.Windows longhorn4074英文测试版大小为 751,360K 因此用CD是无法刻的因为容量不够,所以必须要用DVD刻录机才行这点要注意.序列号TCP8W-T8PQJ-WWRRH-QH