Vue初學 路由

2021-10-08 23:24:46 字數 1016 閱讀 5856

1、安裝:npm install vue-router或cnpm install vue-router或yarn add vue-router

2、在新建router.js中引用如下**

import vue from

'vue'

import vuerouter from

'vue-router'

vue.

use(vuerouter)

3、在src中新建view資料夾,在view新建例如:home資料夾,在資料夾中新建index.vue

"home"

>

>

<

/div>

<

/template>

import content from

"../../components/content.vue"

export

default},

components:

, methods:

}<

/script>

<

/style>4、在router.js中設定如下兩步

1、import home from './views/home/'

2、export default new vuerouter (, ] })

<

/router-view>6、在main.js中 import router from 『./router』

在new的例項中增加router,具體如下:

7、開啟瀏覽器即可看到頁面

初學vue筆記

vue components元件位置在components資料夾 元件的引用 下面是元件渲染 vue也是通過a標籤跳轉頁面 元件注釋要同時注釋掉元件的引用 data的資料渲染 在data return中寫引數 引用 export default中加data 資料渲染 vue 中html css js...

vue路由配置,vue子路由配置

現在乙個專案已經部署完成,接下來我們從路由開始!還記得在初始化專案的時候,有提示是否需要安裝vue router,對沒錯,vue中路由全靠它!首先找到路由配置檔案 router index.js,是整個專案路由配置檔案 首先看最上面的,這個模組引入,es2015中的import.from.將你需要配...

Vue路由獲取路由引數

vue路由設定路由引數有2種方式 登入通過query配置的路徑顯示如下 註冊通過query配置的路徑顯示如下 通過該方法配置的引數,需要在配置路由的時候給引數留個坑,如下圖 獲取路由引數的方法 this.route.query this.route.params doctype html html ...