vue常用操作及學習筆記（路由跳轉及路由傳參篇）

liuoomei發表於2018-08-24
Vue筆記路由

路由跳轉 – 超連結方式跳轉

html：

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 元件來導航. -->
        <!-- 通過傳入 `to` 屬性指定連結. -->
        <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的元件將渲染在這裡 -->
    <router-view></router-view>
</div>

router.js：

import Vue from `vue`;
import vueRouter from `vue-router`;
Vue.use(vueRouter);
// 0. 如果使用模組化機制程式設計，匯入Vue和VueRouter，要呼叫 Vue.use(VueRouter)
 
// 1. 定義（路由）元件。
// 也可以從其他檔案 import 進來
const Foo = { template: `<div>foo</div>` }
const Bar = { template: `<div>bar</div>` }
 
// 2. 定義路由
// 每個路由應該對映一個元件。 其中"component" 可以是
// 通過 Vue.extend() 建立的元件構造器，
// 或者，只是一個元件配置物件。
const routes = [
    { path: `/foo`, component: Foo },
    { path: `/bar`, component: Bar }
]
 
// 3. 建立 router 例項，然後傳 `routes` 配置
// 你還可以傳別的配置引數, 不過先這麼簡單著吧。
const router = new VueRouter({
    routes // （縮寫）相當於 routes: routes
})
 
// 4. 建立和掛載根例項。
// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
    router
}).$mount(`#app`)
 

export default router

路由跳轉 – 函式方法跳轉

this.$router.push();

query方式傳參和接收引數

//query方法傳值
this.$router.push( path : `/xxx`, query : { data })
//query方法取值
this.$route.query.data

注意:傳參是this.$router,接收引數是this.$rout

params方式傳參和接收引數

//params方法傳值
this.$router.push( name : `xxx`, params : { data })
//params取值
this.$route.params.data

注意:params傳參，push裡面只能是 name:`xxxx`,不能是path:`/xxx`

區別：直白的來說query相當於get請求，頁面跳轉的時候，可以在位址列看到請求引數，而params相當於post請求，引數不會再位址列中顯示

擴充：this.$router 和this.$route有何區別？

1.$router為VueRouter例項，想要導航到不同URL，則使用$router.push方法
2.$route為當前router跳轉物件，裡面可以獲取name、path、query、params等

注意： 使用query方式傳值重新整理頁面後引數不會丟失，使用params方式傳值，引數會丟失，使用時需要權衡

相關文章