什么是前端路由清焕？
路由是根據不同的url地址展示不同的內容或頁面
前端路由大致可分為4類
- 動態(tài)路由匹配
- 嵌套路由
- 編程式路由
- 命名路由和命名視圖
-
動態(tài)路由匹配
如：
/goods/:goodsId動態(tài)路由，必須要輸入goods開始祭犯，后面加一個動態(tài)的數字或字符串// router/index.js文件 export default new Router({ mode: 'history', /* 指定路由模式秸妥， history模式在url中是沒有#號的，只有hash模式才有 */ routes: [ { path: '/goods/:goodsId', /* 動態(tài)路由模式 */ name: 'Goods', component: Goods } ] }) // 訪問時可以輸入 localhost:8080/goods/156<!-- GoodsList.vue文件 --> <template> <div> <p>{{ lists }}</p> <p>{{ lists }}</p> <p>{{ lists }}</p> <p>id = {{ $route.params.goodsId }}</p> <!--可以拿到動態(tài)的id--> </div> </template> <script> export default { data () { return { lists: '我是商品列表' } } } </script> <style></style>?
-
嵌套路由
嵌套路由就是在一個頁面中有多個路由鏈接沃粗，可以切換到不同的頁面或內容而無需刷新(路由嵌路由).
下面的案例中在商品列表中嵌套了兩個子路由
- 通過
http://localhost:8080/goods/image訪問圖片 - 通過
http://localhost:8080/goods/title訪問標題
<!-- GoodsList.vue --> <template> <div> <p>{{ lists }}</p> <!-- to到達的地址一定要寫絕對地址,包括上一級goods地址 --> <router-link to="/goods/image">圖片</router-link> <router-link to="/goods/title">標題</router-link> <div> <router-view></router-view> </div> </div> </template> <script> export default { data () { return { lists: '商品列表' } } } </script> <style></style><!-- Image.vue --> <template> <div> <p>{{ img }}</p> </div> </template> <script> export default { data () { return { img: '我是商品圖片' } } } </script> <style></style><!-- Title.vue --> <template> <div> <p>{{ title }}</p> </div> </template> <script> export default { data () { return { title: '我是標題標題' } } } </script> <style></style><!-- /router/index.js文件 --> import Vue from 'vue' import Router from 'vue-router' import Goods from '@/views/GoodsList' import Img from '@/views/Image' import Tit from '@/views/Title' // 如果在一個模塊化工程中使用vue-router粥惧，必須要通過 Vue.use() 明確地安裝路由功能 Vue.use(Router) export default new Router({ mode: 'hash', /*有#號， 默認就是這種方式*/ routes: [ { path: '/goods', name: 'Goods', component: Goods, /** * 1.使用children屬性指定子路由 * 2.在children里面的path中不能出現絕對路徑符合/ * 3.{ path: '/title', component: Tit }中 path 的值多了斜杠最盅，是錯誤的寫法 */ children: [ { path: 'image', name: Img, component: Img }, { path: 'title', component: Tit } ] } ] })?
- 通過
-
編程式路由
通過js來實現頁面的跳轉突雪，目前有3種方法可以實現跳轉
$router.push.('name'); $router.push.({path:'name'}); $router.push.({path:'name?id=123'})或$router.push.({path:'name', query:{a:123}});?
-
命名路由和命名視圖
給路由定義不同的名字，根據名字進行匹配
給不同的router-view定義名字涡贱，通過名字進行對應組件的渲染
<!-- App.vue --> <template> <div id="app"> <img src="./assets/logo.png"> <!-- 這個 router-view 是裝載一級路由的 --> <!-- 該方式很少使用咏删，相當于將該組件劃分為三部分，其實可以在GoodsList中通過樣式劃分區(qū)域 --> <router-view></router-view> <router-view name="tit"></router-view> <router-view name="img"></router-view> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style><!-- /router/index.js文件 --> import Vue from 'vue' import Router from 'vue-router' import Goods from '@/views/GoodsList' import Img from '@/views/Image' import Tit from '@/views/Title' // 如果在一個模塊化工程中使用vue-router问词，必須要通過 Vue.use() 明確地安裝路由功能 Vue.use(Router) export default new Router({ mode: 'hash', /*有#號督函， 默認就是這種方式*/ routes: [ { path: '/', name: 'GoodsList', components: { default: GoodsList, tit: Tit, img: Img } } ] })
什么是后臺路由？
瀏覽器在地址欄中切換不同的url時激挪，每次都向后臺服務器發(fā)出請求辰狡，服務器響應請求，在后臺拼接html文件傳給前端顯示, 返回不同的頁面,意味著瀏覽器會刷新頁面垄分，網速慢的話說不定屏幕全白再有新內容宛篇。后端路由的另外一個極大的問題就是 前后端不分離。
路由的模式
路由的模式有兩種
- mode: 'history'
- mode: 'hash' 會有一個#號出現在url中
// router/index.js文件中指定路由模式
import Vue from 'vue'
import Router from 'vue-router'
import List from '@/components/List' /*@指的是src根目錄*/
// 如果在一個模塊化工程中使用vue-router薄湿，必須要通過 Vue.use() 明確地安裝路由功能
Vue.use(Router)
export default new Router({
mode: 'hash', /* 指定路由模式 */
routes: [
{
path: '/',
name: 'lists',
component: List
}
]
})
history
js中有一個全局的對象
history記錄著用戶的操作歷史叫倍，history.length記錄著已經操作了多少步其實
vue-router就是對history的一個封裝
- 當前頁面刷新
history.go(0) - 前進一頁
history.go(1) - 后退一頁
history.go(-1) - 當前頁面刷新
history.back(0) - 后臺一頁
history.back(1) - 改變頁面
history.pushState(描述偷卧，標題，地址)
注意點1：在template中的錯誤
在任何的
.vue文件段标，template模板中只能有一個根元素涯冠，如果出現兩個或兩個以上的根元素都會出現語法錯誤
-
錯誤的寫法
<template> <!-- 出現兩個根元素會有語法錯誤 --> <p>使用雙大括號渲染內容：{{message}} </p> <p>使用v-html指令渲染內容：<span v-html="message"></span></p> </template> <script> export default { data () { return { message: '<span style="color: green">我是span里面的內容</span>' } } } </script> <style> </style>?
-
正確的寫法
<template> <div id='test'> <p>使用雙大括號渲染內容：{{message}} </p> <p>使用v-html指令渲染內容：<span v-html="message"></span></p> </div> </template> <script> export default { data () { return { message: '<span style="color: green">我是span里面的內容</span>' } } } </script> <style> </style>?
注意點2：引入組件/注冊組件/使用組件
<!-- App.vue是應用程序頁面入口 -->
<template>
<div id="app">
<router-view/>
<!-- 3.使用組件 -->
<Counter></Counter>
</div>
</template>
<script>
// 1.引入Counter.vue組件
import Counter from './components/Counter.vue';
export default {
name: 'App',
components: {
// 2.注冊組件
Counter
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 20px;
}
</style>
注意點3：路由中的傳參區(qū)別
要注意一個問題。router跟route有所不同逼庞。router是路由對象蛇更，所有在js中使用的路由對象
route是單個路由對象。
-
動態(tài)路由的傳參：通過
$route.params.goodrId屬性拿到值routes: [ { path: '/goods/:goodsId', /*動態(tài)路由可以通過$route.params.goodrId拿到goodsId的值*/ name: 'Goods', component: Goods } ]?
-
通過問號傳參:
// 在methods里面調用某個方法赛糟，方法里面調用頁面跳轉 this.$router.push({path:'/car?goodrId=123'}); // 使用 $route.query.goodsId可以拿到goodsId的值?
vue注意事項
- Vue 不支持 IE8 及以下版本派任，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器
- 在引入vue時必須要在head標簽里面引入璧南，不能在body標簽結束前引入掌逛，這樣可以避免出現抖屏的現象。
- 使用
npm run build命令可以生成成產環(huán)境的代碼司倚，即瀏覽器支持的代碼豆混，會在根目錄中生成一個dist文件夾，里面就是生成環(huán)境所使用的代碼动知。
vue-router注意事項
在瀏覽器的地址欄中可以看到url有#號是怎么回事皿伺？
原因是在路由設置時有兩種表示方式：第一種是history，第二種是hash盒粮。如果是使用hash表示法就會在url中顯示#號鸵鸥。
