Vue.js第二天學(xué)習(xí)筆記（vue-router）

更新時(shí)間：2022年09月01日 15:15:29 作者：愛(ài)喝酸奶的吃貨

這篇文章主要為大家詳細(xì)介紹了Vue.js第二天的學(xué)習(xí)筆記，關(guān)于vue-router的使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue中vue-router的使用:

main.js如何配置(es6的寫(xiě)法):在引用之前記得先 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頁(yè)面
import homepage from './page/home.vue'
//引入test頁(yè)面
import test from './page/test.vue'

Vue.use(Router);
Vue.use(Resource);
Vue.use(VueTouch);

var router = new Router({
 abstract: true,
 hashbang: false
});
//實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)
router.map({
 '/home':{
 component:homepage
 }, 
 '/test':{
 component:test
 }, 
 
})

router.start(App, '#app')
// router.go('test'); 默認(rèn)直接跳轉(zhuǎn)到 test 頁(yè)面

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,否則會(huì)'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">我是公共頁(yè)面</div>
 <div class='menu'>
 <ul class="list">
 <li><a v-link='"/home"'>home頁(yè)面</a></li>
 <li><a v-link='"/test"'>test頁(yè)面</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頁(yè)面的內(nèi)容
 </div>
</div>
</template>

test.vue

<template>
<div class="test">
 <div class="test-content">
我是test頁(yè)面的內(nèi)容
</div>
</div>

</template>

最后用webpack 將程序打包.關(guān)于webpack大家可以看看

Vue.js——60分鐘webpack項(xiàng)目模板快速入門

webpack主頁(yè)

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
router

相關(guān)文章

Vue實(shí)現(xiàn)左右菜單聯(lián)動(dòng)實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)左右菜單聯(lián)動(dòng)實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue指令中的v-once用法
這篇文章主要介紹了vue指令中的v-once用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue實(shí)現(xiàn)頁(yè)面返回停留原位置的多種方案
文章主要討論了在 Vue 開(kāi)發(fā)中實(shí)現(xiàn)頁(yè)面返回停留原位置的多種方案,包括 Vuex、keep-alive、v-show、客戶端跳轉(zhuǎn)等,并分別闡述了它們的優(yōu)缺點(diǎn)和適用情況,強(qiáng)調(diào)開(kāi)發(fā)前應(yīng)周全考慮前端業(yè)務(wù)和用戶體驗(yàn),根據(jù)實(shí)際業(yè)務(wù)選擇合適方案,需要的朋友可以參考下
2025-03-03
vue3.0中使用nextTick方式
這篇文章主要介紹了vue3.0中使用nextTick方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
關(guān)于el-form中el-input輸入框的寬度問(wèn)題詳解
自從用了element-ui,確實(shí)好用,該有的組件都有,下面這篇文章主要給大家介紹了關(guān)于el-form中el-input輸入框的寬度問(wèn)題的相關(guān)資料,需要的朋友可以參考下
2023-01-01
Vue中computed(計(jì)算屬性)和watch(監(jiān)聽(tīng)屬性)的用法及區(qū)別說(shuō)明
這篇文章主要介紹了Vue中computed(計(jì)算屬性)和watch(監(jiān)聽(tīng)屬性)的用法及區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vueCli4如何配置vue.config.js文件
這篇文章主要介紹了vueCli4如何配置vue.config.js文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue中的基礎(chǔ)過(guò)渡動(dòng)畫(huà)及實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue中的基礎(chǔ)過(guò)渡動(dòng)畫(huà)原理解析,需要的朋友可以參考下
2018-12-12
使用vue-virtual-scroller遇到的問(wèn)題及解決
這篇文章主要介紹了使用vue-virtual-scroller遇到的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue實(shí)現(xiàn)百分比占比條效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)百分比占比條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09