Vue.js第二天學(xué)習(xí)筆記（vue-router）
更新時間：2022年09月01日 15:15:29 作者：愛喝酸奶的吃貨
這篇文章主要為大家詳細(xì)介紹了Vue.js第二天的學(xué)習(xí)筆記，關(guān)于vue-router的使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue中vue-router的使用:
main.js如何配置(es6的寫法):在引用之前記得先 npm 下所需要的vue
import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import Resource from 'vue-resource'
//import VueTouch from 'vue-touch'
var VueTouch = require('vue-touch')
//引入home頁面
import homepage from './page/home.vue'
//引入test頁面
import test from './page/test.vue'
Vue.use(Router);
Vue.use(Resource);
Vue.use(VueTouch);
var router = new Router({
abstract: true,
hashbang: false
});
//實現(xiàn)頁面跳轉(zhuǎn)
router.map({
'/home':{
component:homepage
},
'/test':{
component:test
},
})
router.start(App, '#app')
// router.go('test'); 默認(rèn)直接跳轉(zhuǎn)到 test 頁面
index.html中引入app.vue和build.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue.js學(xué)習(xí)筆記(2)</title>
<link rel="stylesheet" type="text/css" href="style/bootstrap.css">
</head>
<body>
<!--此處注意加載順序,需要先加載dom在加載js,否則會'Cannot find element: #app'-->
<div id='app'></div>
<script src="static/build.js"></script>
</body>
</html>
<style>
body {
}
</style>app.vue引入router
<template> <div class='all-container'> <div class="public-content">我是公共頁面</div> <div class='menu'> <ul class="list"> <li><a v-link='"/home"'>home頁面</a></li> <li><a v-link='"/test"'>test頁面</a></li> </ul> </div> <router-view transition='animation' class='container' keep-alive></router-view> </div> </template>
home.vue
<template> <div class="home"> <div class="htmleaf-content"> 我是home頁面的內(nèi)容 </div> </div> </template>
test.vue
<template> <div class="test"> <div class="test-content"> 我是test頁面的內(nèi)容 </div> </div> </template>
最后用webpack 將程序打包.關(guān)于webpack大家可以看看
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實現(xiàn)左右菜單聯(lián)動實現(xiàn)代碼
這篇文章主要介紹了Vue實現(xiàn)左右菜單聯(lián)動實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue指令中的v-once用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
文章主要討論了在 Vue 開發(fā)中實現(xiàn)頁面返回停留原位置的多種方案,包括 Vuex、keep-alive、v-show、客戶端跳轉(zhuǎn)等,并分別闡述了它們的優(yōu)缺點和適用情況,強(qiáng)調(diào)開發(fā)前應(yīng)周全考慮前端業(yè)務(wù)和用戶體驗,根據(jù)實際業(yè)務(wù)選擇合適方案,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了vue3.0中使用nextTick方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
關(guān)于el-form中el-input輸入框的寬度問題詳解
自從用了element-ui,確實好用,該有的組件都有,下面這篇文章主要給大家介紹了關(guān)于el-form中el-input輸入框的寬度問題的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明
這篇文章主要介紹了Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vueCli4如何配置vue.config.js文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue中的基礎(chǔ)過渡動畫原理解析,需要的朋友可以參考下2018-12-12
使用vue-virtual-scroller遇到的問題及解決
這篇文章主要介紹了使用vue-virtual-scroller遇到的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)百分比占比條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09