Vue中在新視窗開啟頁面 及 Vue-router

背景

在開發提分加專案的過程中，遇到了點選下拉選單時在新視窗中開啟頁面，由於之前一直做的是單頁面應用，沒有碰到過類似的需求，於是上網搜了一下解決辦法，也再次系統地溫習了一下vue-router。

解決

使用路由物件的resolve方法解析路由，可以得到location、router、href等目標路由的資訊。得到href就可以使用window.open開新視窗了。

const {href} = this.$router.resolve({
    name: "statistics-explain",
    params: {
        classID: id,
        examSubjectID: this.planClassData.examSubjectID,
        studentStatus: 0
    }
});
window.open(href, '_blank');

參考文章：vuerouter怎麼點選開啟新的頁面，就是a標籤裡的target=“blank”

延伸

參考文章：Vue Router

• 動態路由匹配：一個“路徑引數”使用冒號:標記。當匹配到一個路由時，引數值會被設定到this.$route.params，可以在每個元件內使用。

• 巢狀路由：要在巢狀的出口中渲染元件，需要在 VueRouter 的引數中使用 children 配置，要注意，以 / 開頭的巢狀路徑會被當作根路徑。 這讓你充分的使用巢狀元件而無須設定巢狀的路徑。

  export default {
  path: '/scoreplus',
  name: 'scoreplus',
  component: { template: '<router-view />' },
  redirect: { name: 'scoreplus-index' },
  children: [
    {
      // 檢視個人方案
      path: 'preview/:examSubjectID/:xuexinID/:recordsID/:constitute/:planID',
      name: 'score-preview',
      meta: { text: '個人方案' },
      component: ScorePreview
    },
    {
      // 檢視方案內容
      path: 'planList/:planID',
      name: 'score-plan-list',
      meta: { text: '檢視方案內容' },
      component: ScorePlanList
    },
    {
      // 下載方案內容
      path: 'download/:planID/:classID',
      name: 'score-download-list',
      meta: { text: '下載方案內容' },
      component: DownloadList
    },
    {
      // 檢視推送試題
      path: 'push/:planID/:level',
      name: 'score-question-push',
      meta: { text: '檢視推送試題' },
      component: QuestionPush
    },
    {
      // 提分方案首頁
      path: '',
      name: 'scoreplus-index',
      component: ScoreIndex
    }
  ]
  }

• 程式設計式導航

  1. router.push(location, onComplete?, onAbort?)：想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧新增一個新的記錄，所以，當使用者點選瀏覽器後退按鈕時，則回到之前的 URL。

     // 字串
     router.push('home')
     // 物件
     router.push({ path: 'home' })
     // 命名的路由
     router.push({ name: 'user', params: { userId: 123 }})
     // 帶查詢引數，變成 /register?plan=private
     router.push({ path: 'register', query: { plan: 'private' }})

     在 2.2.0+，可選的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回撥作為第二個和第三個引數。這些回撥將會在導航成功完成 (在所有的非同步鉤子被解析之後) 或終止 (導航到相同的路由、或在當前導航完成之前導航到另一個不同的路由) 的時候進行相應的呼叫。

  2. router.replace(location, onComplete?, onAbort?)：跟 router.push 很像，唯一的不同就是，它不會向 history 新增新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。

  3. router.go(n)：這個方法的引數是一個整數，意思是在 history 記錄中向前或者後退多少步，類似 window.history.go(n)。

• 命名路由：可以在建立 Router 例項的時候，在 routes 配置中給某個路由設定名稱。要連結到一個命名路由，可以給 router-link 的 to 屬性傳一個物件。

  <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
  
  router.push({ name: 'user', params: { userId: 123 }})

• 重定向和別名

  1. 重定向（redirect）：

      const router = new VueRouter({
        routes: [
          { path: '/a', redirect: '/b' }
        ]
      })

  2. 別名：/a 的別名是 /b，意味著，當使用者訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像使用者訪問 /a 一樣。

      const router = new VueRouter({
        routes: [
          { path: '/a', component: A, alias: '/b' }
        ]
      })