先看一下目錄結(jié)構(gòu)
每個(gè)view文件的作用
組件文件HelloWorld.vue，主要封裝了可重復(fù)使用的組件，我用它來做了一個(gè)模板頭，主要用于框架頁面的頭部。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: '這是模板頭部'
? ? }
? }
}
</script>
Login.vue作為首頁，登錄頁
<template><
divid="login_div">
這是登錄頁
</div>
</template>
Home.vue頁面作為模板頁面，上部引入組件HelloWorld，記住import，components，<組件標(biāo)簽>，前兩個(gè)地方注冊后，再使用標(biāo)簽標(biāo)記使用組件
顯示區(qū)放入router-view，用于放入顯示頁
<template>
<div id="Home_div">
? 這是主頁home
<HelloWorld></HelloWorld>
<router-view/>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
export default {
name: 'Home',
components: {
HelloWorld
? },
}
</script>
User.vue為嵌入Home的顯示頁面，這里正常寫頁面，不用于Home關(guān)聯(lián)，關(guān)聯(lián)在router中配置即可，在設(shè)置一個(gè)Project.vue用于實(shí)現(xiàn)跳轉(zhuǎn)
<template>
<div class="hello">
<h1>{{ msg }}</h1>
? ? <router-link to="/home">首頁</router-link>
? ? <router-link to="/home/project">項(xiàng)目</router-link>
</div>
</template>
<script>
export default {
name: 'User',
data () {
return {
msg: '這是user頁面'
? ? }
? }
}
router/index.js中配置路由，首頁是login，user是home的子路由，mode默認(rèn)是hash,改成history,就不會(huì)出現(xiàn)#號(hào)
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Home from '@/views/Home'
import User from '@/views/User'
import Project from '@/views/Project'
Vue.use(Router)
export default new Router({
? mode: 'history',
? routes: [
? ? {
? ? ? path: '/',
? ? ? name: 'login',
? ? ? component: Login
? ? },
? ? {
? ? ? path: '/home',
? ? ? name: 'home',
? ? ? component: Home,
? ? ? children: [
? ? ? ? {
? ? ? ? ? path: 'user',
? ? ? ? ? name: 'user',
? ? ? ? ? component: User
? ? ? ? },
? ? ? ? {
? ? ? ? ? path: 'project',
? ? ? ? ? name: 'project',
? ? ? ? ? component: Project
? ? ? ? }]
? ? }
? ]
})
hash模式url帶有#
history模式?jīng)]有#號(hào)
在web目錄下啟動(dòng)
npm run dev
瀏覽器中輸入127.0.0.1:8080，出現(xiàn)根目錄login頁面
主頁，login頁面，button忽略，上面代碼中未寫
home頁面，“這是模板”是引入了HelloWorld組件，下面是空白的router-view
user頁面嵌入在home頁面中，并插入兩個(gè)鏈接
點(diǎn)擊user頁面的項(xiàng)目鏈接，跳轉(zhuǎn)至project頁面
vue-router的搭建，測試完成。
啟動(dòng)時(shí)會(huì)提示eslint格式驗(yàn)證報(bào)錯(cuò)，建議先關(guān)閉，web目錄下config\index.js
注釋一下兩行，啟動(dòng)后，就能避開eslint檢驗(yàn)格式
//useEslint:true,
//showEslintErrorsInOverlay:false,
