Vue（十六）vue-router路由
阿新 • • 發佈：2018-01-22
gin package ebp () func font class 資源 red
[參考](https://router.vuejs.org/zh-cn)
bower info vue-router cnpm install vue-router -S
2. 基本用法 a.布局 b.配置路由
3. 路由嵌套和參數傳遞 傳參的兩種形式： a.查詢字符串：login?name=tom&pwd=123 {{$route.query}} b.rest風格url：regist/alice/456 {{$route.params}}
4. 路由實例的方法 router.push() 添加路由，功能上與<route-link>相同 router.replace() 替換路由，不產生歷史記錄
5. 路由結合動畫
二、 單文件組件
1. .vue文件 .vue文件，稱為單文件組件，是Vue.js自定義的一種文件格式，一個.vue文件就是一個單獨的組件，在文件內封裝了組件相關的代碼：html、css、js
.vue文件由三部分組成：<template>、<style>、<script> <template> html </template>
<style> css </style>
<script> js </script>
2. vue-loader 瀏覽器本身並不認為.vue文件，所以必須對.vue文件進行加載解析，此時需要vue-loader 類似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader等
3. webpack webpack是一個前端資源模板化加載器和打包工具，它能夠把各種資源都作為模塊來使用和處理 實際上，webpack是通過不同的loader將這些資源加載後打包，然後輸出打包後文件 簡單來說，webpack就是一個模塊加載器，所有資源都可以作為模塊來加載，最後打包輸出
[官網](http://webpack.github.io/)
webpack版本：v1.x v2.x
webpack有一個核心配置文件：webpack.config.js，必須放在項目根目錄下
4. 示例，步驟： 4.1 創建項目，目錄結構 如下： webpack-demo |-index.html |-main.js 入口文件 |-App.vue vue文件 |-package.json 工程文件 |-webpack.config.js webpack配置文件 |-.babelrc Babel配置文件
4.2 編寫App.vue
4.3 安裝相關模板 cnpm install vue -S
cnpm install webpack -D cnpm install webpack-dev-server -D
cnpm install vue-loader -D cnpm install vue-html-loader -D cnpm install css-loader -D cnpm install vue-style-loader -D cnpm install file-loader -D
cnpm install babel-loader -D cnpm install babel-core -D cnpm install babel-preset-env -D //根據配置的運行環境自動啟用需要的babel插件 cnpm install vue-template-compiler -D //預編譯模板
合並：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler
4.4 編寫main.js
4.5 編寫webpack.config.js
4.6 編寫.babelrc
4.7 編寫package.json
4.8 運行測試 npm run dev
三、 vue-cli腳手架
1. 簡介 vue-cli是一個vue腳手架，可以快速構造項目結構 vue-cli本身集成了多種項目模板： simple 很少簡單 webpack 包含ESLint代碼規範檢查和unit單元測試等 webpack-simple 沒有代碼規範檢查和單元測試 browserify 使用的也比較多 browserify-simple
2. 示例，步驟： 2.1 安裝vue-cli，配置vue命令環境 cnpm install vue-cli -g vue --version vue list
2.2 初始化項目，生成項目模板 語法：vue init 模板名 項目名
2.3 進入生成的項目目錄，安裝模塊包 cd vue-cli-demo cnpm install
2.4 運行 npm run dev //啟動測試服務 npm run build //將項目打包輸出dist目錄，項目上線的話要將dist目錄拷貝到服務器上
3. 使用webpack模板 vue init webpack vue-cli-demo2
ESLint是用來統一代碼規範和風格的工具，如縮進、空格、符號等，要求比較嚴格 [官網](http://eslint.org)
問題Bug：如果版本升級到node 8.0 和 npm 5.0，控制臺會報錯： GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING 解決方法： a)降低Node版本到7.9或以下 b)修改build/dev-server.js文件，如下： var hotMiddleware = require(‘webpack-hot-middleware‘)(compiler, { log: () => {}, heartbeat:2000 //添加此行 }) 參考：https://github.com/vuejs-templates/webpack/issues/731
一、 vue-router路由
1. 簡介 使用Vue.js開發SPA（Single Page Application）單頁面應用 根據不同url地址，顯示不同的內容，但顯示在同一個頁面中，稱為單頁面應用[參考](https://router.vuejs.org/zh-cn)
bower info vue-router cnpm install vue-router -S
2. 基本用法 a.布局 b.配置路由
<style>
.active{
font-size:20px;
color:red;
text-decoration: none;
}
</style>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
window.onload = function(){
//1.定義組件
var Home = {
template:‘<h3>我是主頁</h3>‘
}
var News = {
template:‘<h3>我是新聞</h3>‘
}
//2.配置路由
const routes = [
{path:‘/home‘,component:Home},
{path:‘/news‘,component:News},
{path:‘*‘,redirect:‘/home‘} //重定向
]
//3.創建路由實例
const router = new VueRouter({
mode:‘history‘, //更改模式
routes, //簡寫，相當於routes:routes
linkActiveClass:‘active‘
})
//4.創建根實例並將路由掛載到Vue實例上
var vm = new Vue({
el:‘#app‘,
router //註入路由
})
}
</script>
</head>
<body>
<div id="app">
<div>
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link to="/home">主頁</router-link>
<router-link to="/news">新聞</router-link>
</div>
<div>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這裏 -->
<router-view></router-view>
</div>
</div>
</body>
3. 路由嵌套和參數傳遞 傳參的兩種形式： a.查詢字符串：login?name=tom&pwd=123 {{$route.query}} b.rest風格url：regist/alice/456 {{$route.params}}
4. 路由實例的方法 router.push() 添加路由，功能上與<route-link>相同 router.replace() 替換路由，不產生歷史記錄
5. 路由結合動畫
二、 單文件組件
1. .vue文件 .vue文件，稱為單文件組件，是Vue.js自定義的一種文件格式，一個.vue文件就是一個單獨的組件，在文件內封裝了組件相關的代碼：html、css、js
.vue文件由三部分組成：<template>、<style>、<script> <template> html </template>
<style> css </style>
<script> js </script>
2. vue-loader 瀏覽器本身並不認為.vue文件，所以必須對.vue文件進行加載解析，此時需要vue-loader 類似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader等
3. webpack webpack是一個前端資源模板化加載器和打包工具，它能夠把各種資源都作為模塊來使用和處理 實際上，webpack是通過不同的loader將這些資源加載後打包，然後輸出打包後文件 簡單來說，webpack就是一個模塊加載器，所有資源都可以作為模塊來加載，最後打包輸出
[官網](http://webpack.github.io/)
webpack版本：v1.x v2.x
webpack有一個核心配置文件：webpack.config.js，必須放在項目根目錄下
4. 示例，步驟： 4.1 創建項目，目錄結構 如下： webpack-demo |-index.html |-main.js 入口文件 |-App.vue vue文件 |-package.json 工程文件 |-webpack.config.js webpack配置文件 |-.babelrc Babel配置文件
4.2 編寫App.vue
4.3 安裝相關模板 cnpm install vue -S
cnpm install webpack -D cnpm install webpack-dev-server -D
cnpm install vue-loader -D cnpm install vue-html-loader -D cnpm install css-loader -D cnpm install vue-style-loader -D cnpm install file-loader -D
cnpm install babel-loader -D cnpm install babel-core -D cnpm install babel-preset-env -D //根據配置的運行環境自動啟用需要的babel插件 cnpm install vue-template-compiler -D //預編譯模板
合並：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler
4.4 編寫main.js
4.5 編寫webpack.config.js
4.6 編寫.babelrc
4.7 編寫package.json
4.8 運行測試 npm run dev
三、 vue-cli腳手架
1. 簡介 vue-cli是一個vue腳手架，可以快速構造項目結構 vue-cli本身集成了多種項目模板： simple 很少簡單 webpack 包含ESLint代碼規範檢查和unit單元測試等 webpack-simple 沒有代碼規範檢查和單元測試 browserify 使用的也比較多 browserify-simple
2. 示例，步驟： 2.1 安裝vue-cli，配置vue命令環境 cnpm install vue-cli -g vue --version vue list
2.2 初始化項目，生成項目模板 語法：vue init 模板名 項目名
2.3 進入生成的項目目錄，安裝模塊包 cd vue-cli-demo cnpm install
2.4 運行 npm run dev //啟動測試服務 npm run build //將項目打包輸出dist目錄，項目上線的話要將dist目錄拷貝到服務器上
3. 使用webpack模板 vue init webpack vue-cli-demo2
ESLint是用來統一代碼規範和風格的工具，如縮進、空格、符號等，要求比較嚴格 [官網](http://eslint.org)
問題Bug：如果版本升級到node 8.0 和 npm 5.0，控制臺會報錯： GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING 解決方法： a)降低Node版本到7.9或以下 b)修改build/dev-server.js文件，如下： var hotMiddleware = require(‘webpack-hot-middleware‘)(compiler, { log: () => {}, heartbeat:2000 //添加此行 }) 參考：https://github.com/vuejs-templates/webpack/issues/731
Vue（十六）vue-router路由