Vue路由切換的兩種方式示例詳解

更新時間：2022年12月14日 10:04:43 作者：千夢、流羽

這篇文章主要介紹了Vue路由切換的兩種方式,主要包括標簽切換和js切換，本文結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下

Vue路由切換的兩種方式

1. 標簽切換

1.1 <a>標簽切換

語法：<a href=“# + 路由路徑”>標簽內(nèi)容</a>

例子：

路由規(guī)則為：

const router = new VueRouter({
    //路由對象數(shù)組
    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>

運行結(jié)果：

在這里插入圖片描述

點擊 切換注冊界面：

在這里插入圖片描述

1.2 路徑切換

語法：<router-link to=“路由路徑”></router-link>

舉例：
路由規(guī)則為：

const router = new VueRouter({
    //路由對象數(shù)組
    routes: [{
            path: '/login',
            component: login,
            name: 'Login'
        },
        {
            path: '/register',
            component: register,
            name: 'Register'
        }
    ]
})

使用路徑切換：

<h2>根據(jù)路徑切換路由（簡寫）</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 的簡寫。

舉例：
路由規(guī)則為：

const router = new VueRouter({
    //路由對象數(shù)組
    routes: [{
            path: '/login',
            component: login,
            name: 'Login'
        },
        {
            path: '/register',
            component: register,
            name: 'Register'
        }
    ]
})

使用 path 切換：

<h2>根據(jù)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 的簡寫

舉例：
路由規(guī)則為：

const router = new VueRouter({
    //路由對象數(shù)組
    routes: [{
            path: '/login',
            component: login,
            name: 'Login'
        },
        {
            path: '/register',
            component: register,
            name: 'Register'
        }
    ]
})

使用name切換：

<h2>根據(jù)name屬性切換路由(推薦，name屬性不常改變，耦合度最小)</h2>
<router-link :to="{name:'Login'}">切換登錄界面</router-link>
<router-link :to="{name:'Register'}">切換注冊界面</router-link>

2. js切換

使用路由后，在 vue 中有兩個對象：

this.$route ——當前路由對象，即 當前頁面路徑所對應(yīng)的路由對象；
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>
        <!-- 根據(jù)路徑切換路由（簡寫） -->
        <h2>根據(jù)路徑切換路由（簡寫）</h2>
        <router-link to="/login">切換登錄界面</router-link>
        <router-link to="/register">切換注冊界面</router-link>

        <!-- 根據(jù)path切換路由（完整） -->
        <h2>根據(jù)path切換路由（完整）</h2>
        <router-link :to="{path:'/login'}">切換登錄界面</router-link>
        <router-link :to="{path:'/register'}">切換注冊界面</router-link>

        <!-- 根據(jù)name屬性切換路由（推薦，name屬性不常改變，耦合度最小 -->
        <h2>根據(jù)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>
    // 創(chuàng)建login組件
    const login = {
        template: `<h2>登錄界面</h2>`
    }

    // 創(chuàng)建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. 創(chuàng)建路由規(guī)則對象
    const router = new VueRouter({
        //路由對象數(shù)組
        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：當前路由對象——當前路徑地址對應(yīng)的路由
                // this.$router-VueRouter：路由管理對象——VueRouter
                // js中切換也是三種方式：路徑切換，path切換，name切換
                this.$router.push({
                    name: 'Login'
                });

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

到此這篇關(guān)于Vue路由切換的兩種方式的文章就介紹到這了,更多相關(guān)Vue路由切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: