Vue 學習筆記 路由篇

2022-06-27 14:00:19 字數 1123 閱讀 6666

官網：

安裝外掛程式

npm install vue-router
安裝完之後在package.json裡面檢視版本

1、首先新建要跳轉的vue檔案  在src->component裡面新建乙個about.vue檔案 

<


template


>


<


div 


class


="container"


>


<


p>this is about


p>


<


p>引數：}


p>


div>


template


>


<


script


>


export 


default


;  }


};script


>
2、然後src裡面新建router資料夾，然後再加乙個index.js檔案

/*


引入vue框架


*/import vue from 'vue';


/*引入資源請求外掛程式


*/import vuerouter from 'vue-router';


import about from '@/components/about';


/*使用router外掛程式


*/vue.use(vuerouter); //


建立路由


export default


newvuerouter(,


]})
3、src->main.js檔案

vue.config.productiontip = false

newvue(

}script

>

<

style

>

style

>

點選這個在下面about頁面的值了

vue學習筆記 路由

1 路由配置 在vue.config中配置，則在 中可以使用 來表示src目錄下 import aa from aa index.js 2 單頁面可以懶載入 3 建立動態路由 路由中定義 載入同乙個元件頁面 argu.vue，根據不同的name 顯示不同的東西 vue元件中獲取資料 route.pa...

vue學習筆記 路由基礎

一 前面我們提到過單頁面富應用階段，那就要依靠我們的前端路由 vue router 二 配置安裝路由 2 在router資料夾下的index.js中學相關的路由配置 首先匯入路由 import vuerouter from vue router import vue from vue 3.這裡我們同...

Vue學習筆記 高階篇

乙個簡單的元件 button counter button counter div body 定義乙個名為 button counter 的新元件 vue.component button counter 如果不用return寫 count 0 則各個部件間會互相影響！template you cl...