14.vue路由脚手架
一.vue路由：https://router.vuejs.org/zh/
1、定義
let router = new VueRouter({mode:"history/hash",base:"基本路徑" 加一些前綴 必須在history模式下有效linkActiveClass:"active", 范圍選擇linkExactActiveClass:"exact", 精確選擇routes:[{path,component}] });2、注入Vue實例中
new Vue({router})
3、渲染
內容
默認翻譯成a標簽
res:
跳轉：
window.history.forward/back();
vm.$router.forward/back();
vm.$router.go(+-n);
vm.$router.push(path);
vm.$router.push({path});
exp:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> .nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;} .router-link-active,.active{ background:yellow;} .router-link-exact-active,.exact{ background:pink;} </style> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> let Index = {template:`<div>首頁</div>`}; let User = {template:`<div>用戶</div>`}; let News = {template:`<div>新聞</div>`}; let About = {template:`<div>關于我們</div>`};let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/index",component:Index},{path:"/user",component:User},{path:"/news",component:News},{path:"/about",component:About},] });window.onload = function(){let vm = new Vue({el:"#app",router, methods:{back(){//window.history.back();//this.$router.back();this.$router.go(-1);},forward(){//window.history.forward();//this.$router.forward();this.$router.go(1);},gohome(){//location = "http://localhost/20180727/%E8%B7%AF%E7%94%B14.html#/index"//this.$router.push("/index");this.$router.push({path:"/index"});}}}); }; </script> </head><body> <div id="app"><input @click="back" type="button" value="后退"/><input @click="forward" type="button" value="前進"/><input @click="gohome" type="button" value="回到首頁"/><hr /><router-link class="nav" to="/index">首頁</router-link><router-link class="nav" to="/user">用戶</router-link><router-link class="nav" to="/news">新聞</router-link><router-link class="nav" to="/about">關于我們</router-link><router-view></router-view> </div> </body> </html>user?id=123 ? req.query ??? /user
/user/123 ??? req.params ?? /user/:id
4.路由傳參：
{path:"/user/:id"} ? {{$route.params.id}} ?
{path:"/user"} ?? {{$route.query.id}} ??
exp1:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> .nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;} .router-link-active,.active{ background:yellow;} .router-link-exact-active,.exact{ background:pink;} </style> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> let User = {template:`<div>用戶id:{{$route.params.id}}---{{a}}--{{b}}</div>`,data(){return {a:1,b:2} },updated(){console.log("updated",this.$route.params.id); } }; let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user/:id",component:User},] });window.onload = function(){let vm = new Vue({el:"#app",router, }); }; </script> </head><body> <div id="app"><router-link class="nav" to="/user/111">用戶1</router-link><router-link class="nav" to="/user/222">用戶2</router-link><router-link class="nav" to="/user/333">用戶3</router-link><router-view></router-view> </div> </body> </html>res:
https://upload-images.jianshu.io/upload_images/12200279-5b1f57650ddb67ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240exp2:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> .nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;} .router-link-active,.active{ background:yellow;} .router-link-exact-active,.exact{ background:pink;} </style> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> let User = {template:`<div>用戶id:{{$route.query.id}}</div>`,updated(){console.log("updated",this.$route.query.id); } }; let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user",component:User},] });window.onload = function(){let vm = new Vue({el:"#app",router, }); }; </script> </head><body> <div id="app"><router-link class="nav" to="/user?id=111">用戶1</router-link><router-link class="nav" to="/user?id=222">用戶2</router-link><router-link class="nav" to="/user?id=333">用戶3</router-link><router-view></router-view> </div> </body> </html>res:
高級用法：把參數(shù)變成組件的屬性
{path:"/user/:id",props:true} ?? props:["id"] ---> this.id ? {{id}} ? ?? params
{path:"/user",props:true} ???? props:["id"] ---> this.id ? {{id}} ? 錯誤的 query
props格式：
1、布爾值 true變成組件屬性
2、對象 {不會改變的值}
3、函數(shù)
query只能用3.函數(shù)傳參
exp1:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> .nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;} .router-link-active,.active{ background:yellow;} .router-link-exact-active,.exact{ background:pink;} </style> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> let User = {props:["id"],template:`<div>用戶id:{{$route.params.id}}---{{id}}</div>`,updated(){console.log("updated",this.$route.params.id,this.id); } }; let router = new VueRouter({routes:[//配置路由 {path,component}//{path:"/user/:id",component:User,props:true},//{path:"/user/:id",component:User,props:{id:123}},{path:"/user/:id",component:User,props(router){console.log(router);return {id:router.params.id}}},] });window.onload = function(){let vm = new Vue({el:"#app",router, }); }; </script> </head><body><div id="app"><router-link class="nav" to="/user/111">用戶1</router-link><router-link class="nav" to="/user/222">用戶2</router-link><router-link class="nav" to="/user/333">用戶3</router-link><router-view></router-view> </div> </body> </html>res:
exp2:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> .nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;} .router-link-active,.active{ background:yellow;} .router-link-exact-active,.exact{ background:pink;} </style> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> let User = {props:["id"],template:`<div>用戶id:{{$route.query.id}}---{{id}}</div>`,updated(){console.log("updated",this.$route.query.id,this.id); } }; let router = new VueRouter({routes:[//配置路由 {path,component}//{path:"/user",component:User,props:true},//{path:"/user",component:User,props:{id:123}},{path:"/user",component:User,props(router){console.log(router);return {id:router.query.id} ;}},] });window.onload = function(){let vm = new Vue({el:"#app",router, }); }; </script> </head><body> <div id="app"><router-link class="nav" to="/user?id=111">用戶1</router-link><router-link class="nav" to="/user?id=222">用戶2</router-link><router-link class="nav" to="/user?id=333">用戶3</router-link><router-view></router-view> </div> </body> </html>res:
----------------------------------
5.路由監(jiān)聽
==watch==:可以加給1、Vue實例，2、組件
watch(){$route(to,from){} }==beforeRouteUpdate==
beforeRouteUpdate (to,from,next){next();next(false);禁止路由跳轉next(path);next({path});next({path,query});next({name,params}); }exp1:
watch:全局監(jiān)聽
exp1:
watch:局部監(jiān)聽
exp3:
beforeRouteUpdate :
exp:
6.命名路由：
主要的用途在路由傳參
{name,params}
{path,query}
7.路由嵌套 命名視圖
組件template取名字,router-link標簽中要加name="名字",默認default,可不寫
VueRouer({routes:[{name,component,children:[{name,componet,children:[{name,component.....}]}]}{name:components:[default:{template:xxxx}xxx:{template:xxxx}]}] }); <router-view><router-view> name="default" <router-view name="xxx"><router-view>exp1:路由嵌套
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> .nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;} .router-link-active,.active{ background:yellow;} .router-link-exact-active,.exact{ background:pink;} </style> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user/:id",name:"user",component:{template:`<div>用戶id:{{$route.params.id}} <router-view></router-view></div>`},children:[//{path,component}{path:"info",component:{template:`<div>info</div>`}},{path:"pass",component:{template:`<div>pass</div>`}}]},] });window.onload = function(){let vm = new Vue({el:"#app",router, }); }; </script> </head><body> <div id="app"><router-link class="nav" to="/user/111">用戶1</router-link> <router-link class="nav" to="/user/222/info">用戶2</router-link> <router-link class="nav" to="/user/333/pass">用戶3</router-link> <router-view></router-view> </div> </body> </html>res:
exp2:
命名視圖
res:
二.vue-cli腳手架
https://www.npmjs.com/package/vue-cli
1、先安裝 npm i -g vue-cli
2、創(chuàng)建項目 vue init
vue init webpack myvue安裝模塊
相當于安卓軟件的不同的應用商城
1、npm
2、yarn https://yarnpkg.com/zh-Hans/
3、bower https://bower.io/
3、啟動項目
cd myvue
npm start 或者 npm run dev
作業(yè):
1.Vue.config.productionTip = false
Vue.config.productionTip的意思
生產(chǎn)模式需要在main.js中關閉 ：Vue.config.productionTip = false,
作用是阻止 vue 在啟動時生成生產(chǎn)提示。
即，不設false會在生產(chǎn)環(huán)境依舊提示：
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
2.import/export http://es6.ruanyifeng.com/#docs/module
引入模塊 require ?? ? ?? ? ? ? import
導出模塊 exports/moudel.exports ?? export
let fs = require("fs");
import fs from "fs"
exports.a = 12;
module.exports = {
a:12
}
export {a:12}
export default {a:12}
require/exports/moudel.exports/import/export
轉載于IMWeb社區(qū)
ES6標準發(fā)布后，module成為標準，標準的使用是以export指令導出接口，以import引入模塊，但是在我們一貫的node模塊中，我們采用的是CommonJS規(guī)范，使用require引入模塊，使用module.exports導出接口。
不把require和import整清楚，會在未來的標準編程中死的很難看。
require時代的模塊
node編程中最重要的思想之一就是模塊，而正是這個思想，讓JavaScript的大規(guī)模工程成為可能。模塊化編程在js界流行，也是基于此，隨后在瀏覽器端，requirejs和seajs之類的工具包也出現(xiàn)了，可以說在對應規(guī)范下，require統(tǒng)治了ES6之前的所有模塊化編程，即使現(xiàn)在，在ES6 module被完全實現(xiàn)之前，還是這樣。
node的module遵循CommonJS規(guī)范，requirejs遵循AMD，seajs遵循CMD，雖各有不同，但總之還是希望保持較為統(tǒng)一的代碼風格。
// a.js// -------- node ----------- module.exports = {a : function() {},b : 'xxx' };// ----------- AMD or CMD ---------------- define(function(require, exports, module){module.exports = {a : function() {},b : 'xxx'}; });可以看出，為了保持風格的高度統(tǒng)一，除了在瀏覽器端的模塊中要使用一個define函數(shù)來提供模塊的閉包以外，其他代碼可以完全一致。
// b.js// ------------ node --------- var m = require('./a'); m.a();// ------------ AMD or CMD ------------- define(function(require, exports, module){var m = require('./a');m.a(); });在使用上，也非常相似。雖然AMD or CMD提供了更加豐富的風格，但是我們本文主要是討論node環(huán)境下，所以不做擴展。
ES6中的module
ES6發(fā)布的module并沒有直接采用CommonJS，甚至連require都沒有采用，也就是說require仍然只是node的一個私有的全局方法，module.exports也只是node私有的一個全局變量屬性，跟標準半毛錢關系都沒有。
export導出模塊接口
export的用法挺復雜的，具體有哪些可以看這里。這里舉幾個例子：
// a.js export default function() {} export function a () {}var b = 'xxx'; export {b}; // 這是ES6的寫法，實際上就是{b:b} setTimeout(() => b = 'ooo', 1000); export var c = 100;在要導出的接口前面，加入export指令。
在export之后，b還可以被修改，這和CommonJS有著巨大不同，關于內部機理的東西，本文就無恥的省略了。
注意，下面的語法有嚴重錯誤：
// 錯誤演示 export 1; // 絕對不可以 var a = 100; export a;export在導出接口的時候，必須與模塊內部的變量具有一一對應的關系。直接導出1沒有任何意義，也不可能在import的時候有一個變量與之對應。export a雖然看上去成立，但是a的值是一個數(shù)字，根本無法完成解構，因此必須寫成export {a}的形式。即使a被賦值為一個function，也是不允許的。而且，大部分風格都建議，模塊中最好在末尾用一個export導出所有的接口，例如：
export {fun as default,a,b,c};import導入模塊
import的語法跟require不同，而且import必須放在文件的最開始，且前面不允許有其他邏輯代碼，這和其他所有編程語言風格一致。
import的使用和export一樣，也挺復雜，可以在這里大致了解。舉幾個例子：
import $ from 'jquery'; import * as _ from '_'; import {a,b,c} from './a'; import {default as alias, a as a_a, b, c} from './a';這里有一些坑，暫時不透露，下面會講到。
import后面跟上花括號的形式是最基本的用法，花括號里面的變量與export后面的變量一一對應。這里，你必須了解對象的解構賦值的知識，沒這知識，你根本沒法在這里裝逼。了解了解構賦值，這里的“一一對應”的關系就能具體理解了。
as關鍵字
編程的同學對as都容易理解，簡單的說就是取一個別名。export中可以用，import中其實可以用：
// a.js var a = function() {}; export {a as fun};// b.js import {fun as a} from './a'; a();上面這段代碼，export的時候，對外提供的接口是fun，它是a.js內部a這個函數(shù)的別名，但是在模塊外面，認不到a，只能認到fun。
import中的as就很簡單，就是你在使用模塊里面的方法的時候，給這個方法取一個別名，好在當前的文件里面使用。之所以是這樣，是因為有的時候不同的兩個模塊可能通過相同的接口，比如有一個c.js也通過了fun這個接口：
// c.js export function fun() {};如果在b.js中同時使用a和c這兩個模塊，就必須想辦法解決接口重名的問題，as就解決了。
default關鍵字
其他人寫教程什么的，都把default放到export那個部分，我覺得不利于理解。在export的時候，可能會用到default，說白了，它其實是別名的語法糖：
// d.js export default function() {}// 等效于： function a() {}; export {a as default};在import的時候，可以這樣用：
import a from './d';// 等效于，或者說就是下面這種寫法的簡寫，是同一個意思 import {default as a} from './d';這個語法糖的好處就是import的時候，可以省去花括號{}。簡單的說，如果import的時候，你發(fā)現(xiàn)某個變量沒有花括號括起來（沒有*號），那么你在腦海中應該把它還原成有花括號的as語法。
所以，下面這種寫法你也應該理解了吧：
import $,{each,map} from 'jquery';import后面第一個$是{defalut as $}的替代寫法。
*符號
*就是代表所有，只用在import中，我們看下兩個例子：
import * as _ from '_';在意義上和import _ from '_';是不同的，雖然實際上后面的使用方法是一樣的。它表示的是把'_'模塊中的所有接口掛載到_這個對象上，所以可以用_.each調用某個接口。
另外還可以通過*號直接繼承某一個模塊的接口：
export * from '_';// 等效于： import * as all from '_'; export all;*符號盡可能少用，它實際上是使用所有export的接口，但是很有可能你的當前模塊并不會用到所有接口，可能僅僅是一個，所以最好的建議是使用花括號，用一個加一個。
該用require還是import？
require的使用非常簡單，它相當于module.exports的傳送門，module.exports后面的內容是什么，require的結果就是什么，對象、數(shù)字、字符串、函數(shù)……再把require的結果賦值給某個變量，相當于把require和module.exports進行平行空間的位置重疊。
而且require理論上可以運用在代碼的任何地方，甚至不需要賦值給某個變量之后再使用，比如：
require('./a')(); // a模塊是一個函數(shù)，立即執(zhí)行a模塊函數(shù) var data = require('./a').data; // a模塊導出的是一個對象 var a = require('./a')[0]; // a模塊導出的是一個數(shù)組你在使用時，完全可以忽略模塊化這個概念來使用require，僅僅把它當做一個node內置的全局函數(shù)，它的參數(shù)甚至可以是表達式：
require(process.cwd() + '/a');但是import則不同，它是編譯時的（require是運行時的），它必須放在文件開頭，而且使用格式也是確定的，不容置疑。它不會將整個模塊運行后賦值給某個變量，而是只選擇import的接口進行編譯，這樣在性能上比require好很多。
從理解上，require是賦值過程，import是解構過程，當然，require也可以將結果解構賦值給一組變量，但是import在遇到default時，和require則完全不同：var $ = require('jquery');和import $ from 'jquery'是完全不同的兩種概念。
上面完全沒有回答“改用require還是import？”這個問題，因為這個問題就目前而言，根本沒法回答，因為目前所有的引擎都還沒有實現(xiàn)import，我們在node中使用babel支持ES6，也僅僅是將ES6轉碼為ES5再執(zhí)行，import語法會被轉碼為require。這也是為什么在模塊導出時使用module.exports，在引入模塊時使用import仍然起效，因為本質上，import會被轉碼為require去執(zhí)行。
但是，我們要知道這樣一個道理，ES7很快也會發(fā)布，js引擎?zhèn)儠M快實現(xiàn)ES6標準的規(guī)定，如果一個引擎連標準都實現(xiàn)不了，就會被淘汰，ES6是遲早的事。如果你現(xiàn)在仍然在代碼中部署require，那么等到ES6被引擎支持時，你必須升級你的代碼，而如果現(xiàn)在開始部署import，那么未來可能只需要做很少的改動。
轉載于:https://www.cnblogs.com/zhongchao666/p/9463020.html
總結
以上是生活随笔為你收集整理的14.vue路由脚手架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ubuntu中NS2安装详细教程
- 下一篇： Vue.js（5）- 全局组件