欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 ——當前路由對象，即 當前頁面路徑所對應的路由對象；
  • 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：當前路由對象——當前路徑地址對應的路由
                // this.$router-VueRouter：路由管理對象——VueRouter
                // js中切換也是三種方式：路徑切換，path切換，name切換
                this.$router.push({
                    name: 'Login'
                });

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

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

相關文章

  • 利用vue控制元素的顯示與隱藏

    利用vue控制元素的顯示與隱藏

    大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關于如何利用vue控制元素的顯示與隱藏的相關資料,需要的朋友可以參考下
    2022-12-12
  • Vue表單及表單綁定方法

    Vue表單及表單綁定方法

    今天小編就為大家分享一篇Vue表單及表單綁定方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue指令做滾動加載和監(jiān)聽等

    vue指令做滾動加載和監(jiān)聽等

    這篇文章主要介紹了vue指令做滾動加載和監(jiān)聽等，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • vue-table實現(xiàn)添加和刪除

    vue-table實現(xiàn)添加和刪除

    這篇文章主要為大家詳細介紹了vue-table實現(xiàn)添加和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-05-05
  • 在vue中使用css modules替代scroped的方法

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

    本篇文章主要介紹了在vue中使用css modules替代scroped的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • Vue?配置代理詳情

    Vue?配置代理詳情

    這篇文章主要介紹了Vue?配置代理詳情，文章圍繞主題的相關資料展開詳細內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下，希望對你的學習有所幫助
    2022-04-04
  • Vue 中指令v-bind動態(tài)綁定及與v-for結(jié)合使用詳解

    Vue 中指令v-bind動態(tài)綁定及與v-for結(jié)合使用詳解

    這篇文章主要為大家介紹了Vue 中指令v-bind動態(tài)綁定及與v-for結(jié)合使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-09-09
  • vue單頁面應用打開新窗口顯示跳轉(zhuǎn)頁面的實例

    vue單頁面應用打開新窗口顯示跳轉(zhuǎn)頁面的實例

    今天小編就為大家分享一篇vue單頁面應用打開新窗口顯示跳轉(zhuǎn)頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • npm?ERR!?code?E404在vscode安裝插件時報錯的兩種解決方案

    npm?ERR!?code?E404在vscode安裝插件時報錯的兩種解決方案

    這篇文章主要給大家介紹了關于npm?ERR!?code?E404在vscode安裝插件時報錯的兩種解決方案,關于這個問題,通常是由于插件名稱輸入錯誤、網(wǎng)絡問題或插件已被刪除引起的,文中將兩種解決方法都介紹的非常詳細,需要的朋友可以參考下
    2023-04-04
  • 關于vue中的ajax請求和axios包問題

    關于vue中的ajax請求和axios包問題

    大家在vue中，經(jīng)常會用到數(shù)據(jù)請求問題，常用的有vue-resourse、axios ，今天小編給大家介紹下axios的post請求 ，感興趣的朋友跟隨腳本之家小編一起看看吧
    2018-04-04

最新評論