這篇開始我們使用npm庫：vue-cli的開發(fā)方式的深入開發(fā)
這次我們只說一個東西：vue的路由處理以及路由方案：vue-router;
路由是啥厌漂，就是跳轉(zhuǎn)頁面的導(dǎo)航處理【我的個人理解，不喜勿噴】剿干。
傳統(tǒng)方案很簡單：<code><a href="about.html">關(guān)于</a></code>
這里說白了就是告訴你怎么跳頁面[從A頁面到B頁面的切換]
1.使用腳手架初始化項目：
<code>vue init webpack pro</code>
2.根據(jù)下圖進行文件的增刪：
項目結(jié)構(gòu)
index.html源碼:
----------------------------------代碼開始---------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tj1</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
</html>
----------------------------------代碼截止---------------------------------------
main.js源碼:
----------------------------------代碼開始---------------------------------------
import Vue from 'vue'
import VueRouter from 'vue-router'
import First from './components/First'
import Secod from './components/Secod'
Vue.use(VueRouter)
// 定義路由配置
const routes = [
{
path: '/',
component: First
},
{
path: '/secod',
component: Secod
}
]
// 創(chuàng)建路由實例
const router = new VueRouter({
routes
})
// 創(chuàng)建 Vue 實例
new Vue({
el: '#app',/* 對應(yīng)index.html的div的id="app" */
data(){
return {
}
},
router
})
----------------------------------代碼截止---------------------------------------
First.vue源碼:
----------------------------------代碼開始---------------------------------------
<template>
<div>
<span>第1個頁面</span>
<router-link to="/secod" >測試</router-link>
</div>
</template>
<script>
export default {
name: 'first',
data () {
return {
}
}
}
</script>
<style scoped>
span{
font-weight: normal;
color:red
}
</style>
----------------------------------代碼截止---------------------------------------
Secod.vue源碼:
----------------------------------代碼開始---------------------------------------
<template>
<div>
<span>第2個頁面</span>
<router-link to="/" >測試</router-link>
</div>
</template>
<script>
export default {
name: 'secod',
data () {
return {
}
}
}
</script>
<style scoped>
span{
font-weight: normal;
color:red
}
</style>
----------------------------------代碼截止---------------------------------------
