vue學習 ---- 使用vue-router 進行跳轉

前提說明，在學習vue的時候，盡量的以官網的為主，而且框架本身與官方文檔都是在不斷迭代更新的。

在vue的框架中，目前都是使用vue-router 來進行頁面跳轉的，而不是<a>。先貼一個vue-router學習的官方文檔   https://router.vuejs.org/zh-cn/essentials/getting-started.html

事實上，使用vue-router  進行頁面跳轉一共有3種方式。這里我就先用一個demo進行說明一下。

一、demo准備工作：自己先按照官網的說明  用webpack搭建 vue-cli  腳手架   網址：https://vuejs-templates.github.io/webpack/  。搭建后運行 npm run dev  ，在瀏覽器頁面成功出來就可以了。

踩坑說明：要及時升級版本！！！，這個版本包括，node版本，npm版本，vue版本，vue-cli版本，在全局安裝vue-cli時會自動默認安裝webpack的最新版本。

因為不同的版本會導致你安裝的vue-cli會有些細微的差異。這對於開發vue有經驗的人說影響不大，因為代碼原理一樣，目的一樣，使用方式不同而已。但是對於初學者會很致命，會繞很多彎路

 先貼出demo源碼  鏈接：https://pan.baidu.com/s/1LIVX1G4EMN6joV1vDSTODg 密碼：boiw

然后，為了更好的說明問題，

在src/components里面創建以下文件

 

src/router/router.js文件修改如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import home from '@/components/home'
import page01 from '@/components/page01'
import page02 from '@/components/page02'

import page01A from '@/components/page01/page01-A'
import page01B from '@/components/page01/page01-b'
import pageEnd from '@/components/page01/B/end'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/page01',
      name: 'page01',
      component: page01,
      children: [
        {
          path: 'page01-a',
          name: 'page01A',
          component: page01A
        },
        {
          path: 'page01-b',
          name: 'page01B',
          component: page01B,
          children: [
            {
              path: 'end',
              name: 'pageEnd',
              component: pageEnd
            }
          ]
        }
      ]
    },
    {
      path: '/page02',
      name: 'page02',
      component: page02
    }
  ]
})

 

 方法一、使用js編程的方式進行頁面跳轉。然后下面紅框是修改部分。

在src/main.js里，給vue的原型鏈添加一個跳轉的函數，在往后需要跳轉的頁面，點擊后調用這個函數即可

 

 方法二、通過router-link實現跳轉

像我這樣，直接渲染出來的是a標簽的。這種試用於不用做各種校驗直接跳轉的情況下使用

 

 

 

 

參考博文：https://www.cnblogs.com/wisewrong/p/6277262.html

　　　　https://www.jb51.net/article/127676.htm