脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue路由切换

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

 更新时间：2022年12月14日 10:04:43   作者：千梦、流羽  
这篇文章主要介绍了Vue路由切换的两种方式,主要包括标签切换和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路由切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 利用vue控制元素的显示与隐藏

    利用vue控制元素的显示与隐藏

    大家都知道在vue中我们可以使用v-if或者v-show去做隐藏显示,下面这篇文章主要给大家介绍了关于如何利用vue控制元素的显示与隐藏的相关资料,需要的朋友可以参考下
    2022-12-12
  • Vue表单及表单绑定方法

    Vue表单及表单绑定方法

    今天小编就为大家分享一篇Vue表单及表单绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue指令做滚动加载和监听等

    vue指令做滚动加载和监听等

    这篇文章主要介绍了vue指令做滚动加载和监听等，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue-table实现添加和删除

    vue-table实现添加和删除

    这篇文章主要为大家详细介绍了vue-table实现添加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 在vue中使用css modules替代scroped的方法

    在vue中使用css modules替代scroped的方法

    本篇文章主要介绍了在vue中使用css modules替代scroped的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Vue 配置代理详情

    Vue 配置代理详情

    这篇文章主要介绍了Vue 配置代理详情，文章围绕主题的相关资料展开详细内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助
    2022-04-04
  • Vue 中指令v-bind动态绑定及与v-for结合使用详解

    Vue 中指令v-bind动态绑定及与v-for结合使用详解

    这篇文章主要为大家介绍了Vue 中指令v-bind动态绑定及与v-for结合使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • vue单页面应用打开新窗口显示跳转页面的实例

    vue单页面应用打开新窗口显示跳转页面的实例

    今天小编就为大家分享一篇vue单页面应用打开新窗口显示跳转页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • npm ERR! code E404在vscode安装插件时报错的两种解决方案

    npm ERR! code E404在vscode安装插件时报错的两种解决方案

    这篇文章主要给大家介绍了关于npm ERR! code E404在vscode安装插件时报错的两种解决方案,关于这个问题,通常是由于插件名称输入错误、网络问题或插件已被删除引起的,文中将两种解决方法都介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • 关于vue中的ajax请求和axios包问题

    关于vue中的ajax请求和axios包问题

    大家在vue中，经常会用到数据请求问题，常用的有vue-resourse、axios ，今天小编给大家介绍下axios的post请求 ，感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-04-04

最新评论