vue2.0入門及實戰開發(五)
阿新 • • 發佈:2019-02-05
專案路由
前端路由:核心就是錨點值的改變,根據不同的值,渲染指定DOM位置的不同資料
ui-router:錨點值改變,如何獲取模版?ajax
vue中,模版資料不是通過ajax請求來,而是呼叫函式獲取模版內容
核心:錨點值改變
以後看到vue開頭,就必須知道Vue.use
Vue-router(路由),Vuex(管理全域性共享資料)
使用方式
1:下載 npm i vue-router -S
2: 引入,在main.js中引入 import VueRouter from 'vue-router'
3:安裝外掛 Vue.use(外掛) Vue.use(VueRouter)
4:需要配置路由規則,需要個路由物件
let router=new VueRouter({routes:[path:'/home',component:Home} ] });
5:將其路由物件傳遞給Vue的例項,options中 router : router
6:留坑 <router-view></ruoter-view>
//引入一堆
import Vue from 'vue'
import VueRouter from 'vue-router'
//主體
import App from './components/app.vue'
import Home from './components/home.vue'
//安裝外掛
Vue.use (VueRouter); //掛載屬性
//建立路由物件並配置路由規則
let router=new VueRouter({
routes:[
//一個個物件
{path:'/',component:Home}
]
})
//new Vue啟動
new Vue({
el: '#app',
//讓vue知道我們的路由規則
router:router, //可以簡寫成router
render:c=>c(App);
})
錯誤整理
1:Module not found:Error:Can't resolve 'vue-router'
可能是因為沒安裝好,
2:Uncaught Error:Cannot find module "vue-router"
沒有裝載vue-router, Vue.use(vue-router) 或者 npm i vue-router -S
3:Module not found:Error:Can`t resolve ' less-loader'
在子元件中的樣式里加了程式碼
<style lang="less" scoped>
</style>
而這個less是需要安裝的,npm install --save-dev less-loader less
https://www.npmjs.com/package/less-loader
所以不想安裝的話可以直接刪掉,若要用就要安裝,否則就報錯
4:webpack後,出現htmlWebpackPlugin is not defined
說明沒有宣告htmlWebpackPlugin物件
const htmlWebpackPlugin=requrie('html-webpack-plugin')
5:Error:missing script: dev
在package.json中沒有這個命令,加入就好
重點:沒有留坑和規則不匹配,當沒顯示的時候可能的原因
基於webpack編譯,就要打包