Vue路由切换的两种方式示例详解

目录
  • Vue路由切换的两种方式
  • 1. 标签切换
    • 1.1 <a>标签切换
    • 1.2 路径切换
    • 1.3 path切换
    • 1.4 name切换(推荐)
  • 2. js切换

Vue路由切换的两种方式

1. 标签切换

1.1 <a>标签切换

语法：<a href=“# + 路由路径”>标签内容</a>

例子：

路由规则为：

const router = new VueRouter({
    //路由对象数组
    routes: [{
            path: '/login',
            component: login,
            name: 'Login'
        },
        {
            path: '/register',
            component: register,
            name: 'Register'
        }
    ]
})

使用 a 标签：

<!-- 使用a标签切换路由 -->
<h2>使用a标签切换路由</h2>
<a href="#/login" rel="external nofollow"  rel="external nofollow" >切换登录界面</a>
<a href="#/register" rel="external nofollow"  rel="external nofollow" >切换注册界面</a>

运行结果：

点击 切换注册界面：

1.2 路径切换

语法：<router-link to=“路由路径”></router-link>

举例：
路由规则为：

const router = new VueRouter({
    //路由对象数组
    routes: [{
            path: '/login',
            component: login,
            name: 'Login'
        },
        {
            path: '/register',
            component: register,
            name: 'Register'
        }
    ]
})

使用路径切换：

<h2>根据路径切换路由（简写）</h2>
<router-link to="/login">切换登录界面</router-link>
<router-link to="/register">切换注册界面</router-link>

1.3 path切换

path切换是路径切换的完整写法：

语法：<router-link :to=“{path:路由路径}”></router-link>
:to 是 v-bind:to 的简写。

举例：
路由规则为：

const router = new VueRouter({
    //路由对象数组
    routes: [{
            path: '/login',
            component: login,
            name: 'Login'
        },
        {
            path: '/register',
            component: register,
            name: 'Register'
        }
    ]
})

使用 path 切换：

<h2>根据path切换路由（完整）</h2>
<router-link :to="{path:'/login'}">切换登录界面</router-link>
<router-link :to="{path:'/register'}">切换注册界面</router-link>

1.4 name切换(推荐)

语法：<router-link :to=“{name:路由名称}”></router-link>
:to 为 v-bind:to 的简写

举例：
路由规则为：

const router = new VueRouter({
    //路由对象数组
    routes: [{
            path: '/login',
            component: login,
            name: 'Login'
        },
        {
            path: '/register',
            component: register,
            name: 'Register'
        }
    ]
})

使用name切换：

<h2>根据name属性切换路由(推荐，name属性不常改变，耦合度最小)</h2>
<router-link :to="{name:'Login'}">切换登录界面</router-link>
<router-link :to="{name:'Register'}">切换注册界面</router-link>

2. js切换

使用路由后，在 vue 中有两个对象：

  • this.$route ——当前路由对象，即 当前页面路径所对应的路由对象；
  • this.$router——路由管理对象，即 VueRouter；

在 js 切换中语法为：

this.$router.push(
切换方式
)

路径切换：

login: function () {
	this.$router.push('/login');
}

path切换：

login: function () {
	this.$router.push({
	    path:'/login',  // path切换
	});
}

name切换：

login: function () {
	this.$router.push({
	    name: 'Login'		//name切换
	});
}

完整测试代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由切换的两种方式</title>
</head>

<body>
    <div id="app">
        <!-- 1. 通过标签切换 -->
        <!-- 使用a标签切换路由 -->
        <h2>使用a标签切换路由</h2>
        <a href="#/login" rel="external nofollow"  rel="external nofollow" >切换登录界面</a>
        <a href="#/register" rel="external nofollow"  rel="external nofollow" >切换注册界面</a>
        <!-- 根据路径切换路由（简写） -->
        <h2>根据路径切换路由（简写）</h2>
        <router-link to="/login">切换登录界面</router-link>
        <router-link to="/register">切换注册界面</router-link>

        <!-- 根据path切换路由（完整） -->
        <h2>根据path切换路由（完整）</h2>
        <router-link :to="{path:'/login'}">切换登录界面</router-link>
        <router-link :to="{path:'/register'}">切换注册界面</router-link>

        <!-- 根据name属性切换路由（推荐，name属性不常改变，耦合度最小 -->
        <h2>根据name属性切换路由(推荐，name属性不常改变，耦合度最小)</h2>
        <router-link :to="{name:'Login'}">切换登录界面</router-link>
        <router-link :to="{name:'Register'}">切换注册界面</router-link>

        <!-- 2. 在js代码中切换路由 -->
        <!-- <button @click="login">登录界面</button>
        <button @click="register">注册界面</button> -->

        <!-- 选择的组件会在这里生成 -->
        <router-view></router-view>
    </div>
</body>

</html>

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>

<script>
    // 创建login组件
    const login = {
        template: `<h2>登录界面</h2>`
    }

    // 创建register组件
    const register = {
        template: `<h2>注册界面</h2>`
    }

    const VueRouterPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push(to) {
        return VueRouterPush.call(this, to).catch(err => err)
    }

    // 1. 创建路由规则对象
    const router = new VueRouter({
        //路由对象数组
        routes: [{
                path: '/login',
                component: login,
                name: 'Login'
            },
            {
                path: '/register',
                component: register,
                name: 'Register'
            }
        ]
    })

    const app = new Vue({
        el: '#app',
        data: {
            msg: "切换路由"
        },
        methods: {
            login: function () {
                // this.$route-object：当前路由对象——当前路径地址对应的路由
                // this.$router-VueRouter：路由管理对象——VueRouter
                // js中切换也是三种方式：路径切换，path切换，name切换
                this.$router.push({
                    name: 'Login'
                });

            },
            register: function () {
                this.$router.push({
                    name: 'Register'
                });
            }
        },
        // 2. 注册路由对象
        router,
    })
</script>

到此这篇关于Vue路由切换的两种方式的文章就介绍到这了,更多相关Vue路由切换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue 路由切换时页面内容没有重新加载的解决方法

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t

  • vue路由切换之淡入淡出的简单实现

    路由跳转的淡入淡出 在开发中有一种需求叫高端.大气.上档次.所以作为一个前端有责任让你的程序开起来更酷炫.可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计 想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性 <transition name="fade" mode="in-out"> <router-view ></router-

  • Vue路由切换时的左滑和右滑效果示例

    如何实现Vue路由切换时的左滑和右滑效果,因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果,于是突发奇想要做这个功能,看了看QQ.微信都没这样的效果,最后发现SegmentFault(思否) 和掘金两个app都有这样的效果,就以此为参考开始做了. transition 首先看看官网淡入淡出动画的例子: <div id="demo"> <button v-on:click="show = !show"> Toggle <

  • Vue路由切换页面不更新问题解决方案

    前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了. 一.问题呈现 在路由中进行切换结果 这时候会发现input标签的value值并没有随着路由的改变而改变.并没有更新 二.解决方案① 给<router-view :key="key"></router-view>增加一个不同:key值,这样vue

  • vue实现路由切换改变title功能

    由于vue项目通常是单页应用,因此在入口文件index.html只有一个title,单页所展示的若干页面只是随着路由的切换而在同一个index.html上不同的渲染而已,因此此时的title属性是不会随着页面的切换而变更的 那么想实现路由切换title变换可以通过vue-router的导航守卫来实现,最简单的的目录结构可如下所示 ├── index.html ├── main.js ├── api │ └── ... # 抽取出API请求 ├── common │ └── constants.j

  • vue 路由切换过渡动效滑入滑出效果的实例代码

    vue 路由切换过渡动效滑入滑出效果的实例代码

    效果展示 css 滑入和滑出的动画 .twofade-enter {transform: translateX(100%);} .twofade-enter-active {transition: all 0.3s;position: absolute;height:100%;background:#ececec;} .twofade-leave-active {transition: all 0;transition-delay: 0.3s;position: absolute;} .twof

  • Vue路由切换的两种方式示例详解

    目录 Vue路由切换的两种方式 1. 标签切换 1.1 <a>标签切换 1.2 路径切换 1.3 path切换 1.4 name切换(推荐) 2. js切换 Vue路由切换的两种方式 1. 标签切换 1.1 <a>标签切换 语法:<a href=“# + 路由路径”>标签内容</a> 例子: 路由规则为: const router = new VueRouter({ //路由对象数组 routes: [{ path: '/login', component:

  • JS实现Tab栏切换的两种方式案例详解

    面向过程的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic

  • Vue自定义组件的四种方式示例详解

    四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码. 1.全局组件 定义方式示例: Vue.component("hello-component",{ props:["message"], t

  • 微信小程序路由跳转两种方式示例解析

    目录 官方文档 路由跳转的两种形式 标签形式 js形式 快速总结 小程序路由跳转 1.1 wx.switchTab(Object object) 1.2 wx.reLaunch(Object object) 1.3 wx.redirectTo(Object object) 1.4 wx.navigateTo(Object object) 1.5 wx.redirectTo与wx.navigateTo的区别 1.6 wx.navigateBack(Object object) 官方文档 https

  • ubuntu 16.04安装redis的两种方式教程详解(apt和编译方式）

    ubuntu 16.04安装redis的两种方式教程如下所示: 方式一 :apt安装 在 Ubuntu 系统安装 Redi 可以使用以下命令: $sudo apt-get update $sudo apt-get install redis-server 启动 Redis $ redis-server 查看 redis 是否启动? $ redis-cli 以上命令将打开以下终端: redis 127.0.0.1:6379> 127.0.0.1 是本机 IP ,6379 是 redis 服务端口.

  • Spring加载properties文件的两种方式实例详解

    Spring加载properties文件的两种方式实例详解

    在项目中如果有些参数经常需要修改,或者后期可能需要修改,那我们最好把这些参数放到properties文件中,源代码中读取properties里面的配置,这样后期只需要改动properties文件即可,不需要修改源代码,这样更加方便.在Spring中也可以这么做,而且Spring有两种加载properties文件的方式:基于xml方式和基于注解方式.下面分别讨论下这两种方式. 1. 通过xml方式加载properties文件 我们以Spring实例化dataSource为例,我们一般会在beans

  • java 实现websocket的两种方式实例详解

    一.介绍 1.两种方式,一种使用tomcat的websocket实现,一种使用spring的websocket 2.tomcat的方式需要tomcat 7.x,JEE7的支持. 3.spring与websocket整合需要spring 4.x,并且使用了socketjs,对不支持websocket的浏览器可以模拟websocket使用 二.方式一:tomcat 使用这种方式无需别的任何配置,只需服务端一个处理类, 服务器端代码 package com.Socket; import java.io

  • Windows10安装linux子系统的两种方式(图文详解)

    Windows10支持Linux子系统了,告别繁琐的双系统.虚拟机安装,原生安装方便快捷. windows subsystem for linux简称WSL. 这里介绍2种安装方式,总有一款适合你. 图形化安装 启用开发者模式 按下 Windows 键,打开设置 设置-->更新和安全-->开发者选项-->开发人员模式 开启适用于Linux的Windows子系统按下 Windows jian键,输入控制面板 打开控制面板 打开 应用或关闭Windows功能 ,勾选 适用于Linux的Win

  • C#获取本地IP的四种方式示例详解

    1.第一种方式 采用System.Net.Dns的GetHostAddress的方式,具体请看代码: /// <summary> /// 网络不通畅可以获取 /// 不过能获取到具体的IP /// </summary> /// <returns></returns> public static List<IPAddress> GetByGetHostAddresses() { try { IPAddress[] adds = Dns.GetHos

  • node运行js获得输出的三种方式示例详解

    一.通过console.log输出(我最喜欢的) 1.js脚本 1.js var arguments = process.argv.splice(2); //获得入参 var a= arguments[0]; 取第一个 console.log(a) //输出 2.python脚本 test_1.py import os print(os.popen('node 1.js fuck').read()) #打印结果fuck 二.通过文件读写获取 1.js脚本 1.js //npm环境别忘了装了 va

随机推荐