vue中路由的簡單使用

vue中路由(vue-router)的使用

router.js中配置路由規則，專案中所有的路由規則通常都統一配置到同乙個檔案中，習慣將這個檔案命名為router.js，

router.js內容如下：

import vue from 'vue'

import router from 'vue-router'
import home    from '../components/home.vue';
import product from '../components/product.vue';
import project from '../components/project.vue';
import aboutus from '../components/aboutus.vue';
import subprod1 from '../components/subprod1.vue';
import subprod2 from '../components/subprod2.vue';
vue.use(router);
export default new router(,,,
]},,,
,]})

import vue from 'vue'

import router from './router/router.js'
vue.config.productiontip = false
/* eslint-disable no-new */
new vue()

home.vue元件:

這是首頁元件

產品資訊

這是專案案例元件

產品1詳情

產品2詳情

Vue專案中路由的基本使用

1.安裝vue router庫 將vue router庫安裝到專案中，執行命令 npm install vue router s2.配置路由對映 在src router目錄下，建立乙個index.js路由對映檔案，內容如下 import vue from vue import vuerouter f...

vue中路由跳轉 配置

import vuerouter from vue router vue.use vuerouter 例項const routes name 在做路由守衛的時候會用到name，children export const router new vuerouter 預設是hash模式 hash模式和hi...

Vue中路由傳參

按大類有兩種傳遞方式，分別是params和query。其中params又分為兩種,即在url中顯示引數和不顯示引數。1 params傳參，顯示引數 這種情況屬於動態路由，需要提前在路由中配置好，如 path user id component user 如id為12345，這時導航欄中的url會顯示...