vue_VueRouter 路由_路由器管理n個路由_並向路由組件傳遞數據_新標籤路由_編程式路由導航

路由：就是一個 key 與 value 的映射關係。key 就是 pathh

前臺路由的 value 是 Component 組件對象

後臺路由的 value 是一個 回調函數

普通連接： 會發送請求，與後臺交互

路由連接： 不會發送請求，純前臺處理

request

body ---- post 請求體數據

params ---- /detail/:id 請求參數        冒號 用於佔位，字符串 爲參數名

query ---- /detail/5?name=Tom 請求字符串

vue-router

npm install vue-router --save

src/router -------- 1. 定義路由器對象模塊

import Vue from "vue"

import VueRouter from "vue-router"

import Home from "./pages/Home"

import About from "./pages/About"

Vue.use(VueRouter);

export default new VueRouter({

mode: "history",        // 路由連接不帶 #

routes:[

{

path: "/home",

component: Home

},

{

path: "/about",

component: About

}

]

})

src/main.js -------- 入口文件，2. 配置 路由器

import router from "./router"

new Vue({

router        // 配置路由器

})

src/App.vue -------- 3. 使用路由

// 路由連接

<router-link to="/about">About</router-link>

<router-link to="/home">Home</router-link>

 

// 渲染當前路由對應的組件 - 將會給全部相關路由頁面 傳遞 msg

<router-view msg="123abc"></router-view>

 

// 實現： 緩存路由組件對象，頁面的前進、後退，會保存以前用戶輸入數據

//<keepalive>

//<router-view msg="123abc"></router-view>

//</keepalive>    // 好比股票這種實時性要求高的需求，不能使用 <keepalive>

• 路由組件傳遞數據 還能夠使用 params 和 query
• 編程式路由導航

this.$router.back() / this.$router.go(-1)

this.$router.go(1)

this.$router.push(path)

this.$router.replace(path)

• 使用 $router.resolve 這種方法可以實現新窗口打開路由，示例代碼以下：

參考： https://www.cnblogs.com/zhangruiqi/p/9266704.html

• // this.$router.push("/searchGoods");
  let routeData = this.$router.resolve({
     name: "searchGoods",
     query: params,
     params:{catId:params.catId}
  });
  window.open(routeData.href, '_blank');

雖然是單頁面應用 SPA，可是不免會遇到 "新標籤打開，用戶體驗會更好" 的狀況。