vue中實現(xiàn)路由跳轉(zhuǎn)的三種方式

一、使用vue-router

vue-router 本質(zhì)是一個第三方的包 用的時候需要下載

步驟 （7步法 ）：

下載vue-router模塊到當(dāng)前工程

 yarn add vue-router

在main.js中引入VueRouter函數(shù)

// 引入路由
import VueRouter from "vue-router";

添加到Vue.use()身上 – 注冊全局RouterLink和RouterView組件

// 注冊全局
Vue.use(VueRouter)

創(chuàng)建路由規(guī)則數(shù)組 – 路徑和組件名對應(yīng)關(guān)系

創(chuàng)建路由規(guī)則數(shù)組（需要準(zhǔn)備切換的頁面組件）把準(zhǔn)備好的頁面組件引入到main.js中

const routes = [{
            path: "/",
            redirect: "find" //默認(rèn)顯示推薦組件(路由的重定向)
        },
        {
            path: "/find",
            name: "Find",
            component: Find,
            //二級路由
            children: [{
                    path: "/",
                    redirect: "recom" //默認(rèn)顯示推薦組件
                },
                {
                    path: "ranking", //注意二級路由的路徑千萬不要加/
                    component: Ranking
                },
                {
                    path: "songlist",
                    component: SongList
                },
            ]
        },
        {
            path: "/my",
            name: "My",
            component: My
        },
        {
            path: "/part",
            name: "Part",
            component: Part
        },

        {
            path: "*",
            component: NotFound //定義找不到已有組件時顯示404
        },
    ]

用規(guī)則生成路由對象

    // 創(chuàng)建路由對象并且傳入規(guī)則
const router = new VueRouter({
    routes,
    mode: "history" //路由模式(默認(rèn)為hash模式)
})

把路由對象注入到new Vue實例中

new Vue({
    router, //導(dǎo)入路由對象
    render: h => h(App),
}).$mount('#app')

用router-view作為掛載點, 切換不同的路由頁面

當(dāng)url的hash值路徑切換，顯示規(guī)則里對應(yīng)的組件

router-view 實現(xiàn)路由內(nèi)容的地方，引入組件時寫到需要引入的地方 需要注意的是，使用vue-router控制路由則必須router-view作為容器。（可以先引入根組件App.vue中進(jìn)行自測）

注意: 一切都要以url上hash值為準(zhǔn)

二、聲明式-router-link 【實現(xiàn)跳轉(zhuǎn)最簡單的方法】

1.可用組件router-link來替代a標(biāo)簽

• router-link 是vue-router提供了一個全局組件
• router-link實質(zhì)上最終會渲染成a鏈接 to屬性等價于提供 href屬性(to無需#)
• router-link提供了聲明式導(dǎo)航高亮的功能(自帶類名)

代碼如下：

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">發(fā)現(xiàn)音樂</router-link>
      <router-link to="/my">我的音樂</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>
//在控制臺元素檢查時會發(fā)現(xiàn)激活的類名 在樣式style中定義高亮樣式 點擊時就會高亮

router-link好處 : 自帶激活時的類名, 可以做高亮

2.在跳轉(zhuǎn)路由時, 可以給路由對應(yīng)的組件內(nèi)傳值

在router-link上的to屬性傳值, 語法格式如下 :

(方式一)

to=/path?參數(shù)名=值

例：to="/part?name=小明"

對應(yīng)頁面組件接收傳遞過來的值

$route.query.參數(shù)名

接收數(shù)據(jù)：$route.query.name

(方式二)

to=“/path/值” (需在路由規(guī)則里配置/path/:參數(shù)名)

例：to="/part/小王"

配置：path:"/part/:username"

對應(yīng)頁面組件接收傳遞過來的值 （注意動態(tài)參數(shù)需要用params接收）

$route.params.參數(shù)名

接收數(shù)據(jù)：$route.params.username

三、編程式-用JS代碼來進(jìn)行跳轉(zhuǎn)

用JS代碼來進(jìn)行跳轉(zhuǎn)

語法: path或者name任選一個

一、$ router 和 $ route的區(qū)別

$router : 是路由操作對象，只寫對象

$route : 路由信息對象，只讀對象

$ router操作路由跳轉(zhuǎn)

this.$router.push({ name:‘hello', query:{ name:‘word', age:‘11' } })

$route讀取 路由參數(shù)接收

var name = this.$route.query.name;

二、路由跳轉(zhuǎn)方式name 、 path 和傳參方式params 、query的區(qū)別（重要）

path 和 name路由跳轉(zhuǎn)方式，都可以用query傳參

使用path方式跳轉(zhuǎn)路由 path會忽略params 所以path不能和params一起使用

推薦使用name和query方式實現(xiàn)路由跳轉(zhuǎn)

params傳參，push里面只能是 name:‘xxx’,不能是path:‘/xxx’,因為params只能用name來引入路由，如果這里寫成了path，接收參數(shù)頁面會是undefined！?。?/p>

通過params傳參

==注意：==這里使用name路由跳轉(zhuǎn)方式路徑不需要加 / 因為它只是個名字

this.$router.push({
    name:"Home",
    params:{
        id:this.id
    }
})

另一個頁面接收:

這里使用params傳參就需要寫params接收

this.$route.params.id

通過query傳參

this.$router.push({
    path:"/Search",
    query:{ //query是個配置項
        age:20
    }
})

另一個頁面接收

this.$route.query.age

query相當(dāng)于GET請求，頁面跳轉(zhuǎn)的時候，可以在地址欄看到請求參數(shù)

uery傳參**

this.$router.push({
    path:"/Search",
    query:{ //query是個配置項
        age:20
    }
})

另一個頁面接收

this.$route.query.age

總結(jié)：
query相當(dāng)于GET請求，頁面跳轉(zhuǎn)的時候，可以在地址欄看到請求參數(shù)

params相當(dāng)于POST請求，參數(shù)不會在地址欄中顯示

到此這篇關(guān)于vue中實現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程的文章就介紹到這了,更多相關(guān)vue路由跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論