接著上一篇文章：我們已經(jīng)把環(huán)境都搞建好了，已經(jīng)寫了幾個簡單的頁面了，現(xiàn)在我們具體地講一下
1.png
一、首先我們講一下src中的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>3d微改車</title>
<link rel="stylesheet" href="/style/styles.css" charset="utf-8"> 這里對應(yīng)你生成的css文件具體看gulpfile中的編譯的路徑
</head>
<body>
<section id="app">
<router-view></router-view> 路由入口，整個應(yīng)用的開始點(diǎn)
</section>
<script src="/js/index.js"></script>這里是生成的是js具體按你生成的路徑，生成的文件名來引入
</body>
</html>
二、路由
router.js路由文件，這里我介紹一下路由的寫法，以及應(yīng)該用
export default [
{
name: 'home', //路由的名稱，這個值是唯一 ，起名的好處就是在跳轉(zhuǎn)的時(shí)候放便
meta: { //給路傳遞一些參數(shù)
title: '模型列表'
},
path: '', //路徑這里填寫路由的路徑，即域名后面的url 不能帶？號的那一部份
component: function (resolve) { //按需加載，這樣寫的好處就是需要的時(shí)候才會加載這個頁面的代碼，至于其它寫法請上官網(wǎng)查看，webpack會分包編譯從（dist/js的0.js,1.js……）看出來
require(['./view/home/index.vue'], resolve)
}
},
{
name: 'case',
path: '/case',
component: function (resolve) {
require(['./view/case/index.vue'], resolve)
}
},
{
name: 'news',
path: '/news',
component: function (resolve) {
require(['./view/news/index.vue'], resolve)
}
},
{
name: 'newdetail',
path: '/news/:id',// 帶參數(shù)路由的寫法 加: 后面是參數(shù)名, 可帶多個
component: function(resolve) {
require(['./view/news/index.vue'], resolve)
}
}
];
三、入口文件src/index.js
//引入 vue與vue路由
import Vue from 'vue';
import VueRouter from 'vue-router';
//引入整個網(wǎng)頁的首頁以及寫好的路由文件
import routes from './router';
import App from './app.vue';
Vue.use(VueRouter); //運(yùn)用路由插件
const router = new VueRouter({ //創(chuàng)路由
// mode: 'history', //這里去掉注釋會去掉網(wǎng)頁上的#號，是html5模式，具體到后再講
routes
})
new Vue({
el: '#app',//整個文件入口dom元素的id
router: router,
render: h => h(App) //首頁文件
})
四、首頁文件 app.vue
<template>
<section>
<router-link :to="{ name: 'home'}">首頁</router-link>
<router-link :to="{ name: 'case'}">案例</router-link>
<router-link :to="{ name: 'news'}">新聞</router-link>
<router-view></router-view> //子組件入口
</section>
</template>
router-link的使用，為什么要選擇router-link呢因?yàn)槭褂胷outer可以把頁面存入歷史記錄中，可以是達(dá)到緩存不重新渲染頁面的目的。也就是上面路由中的 // mode: 'history',（以后再講）
<router-link to="home">Home</router-link> //這樣寫就直把home當(dāng)路徑 也就是編譯為
<a href="home" >Home</a>
//我推薦用
<router-link to="{name:'news',params:{id:10},query:{page:10}}">new</router-link> //這樣寫 也就是編譯為
<a href="/news/10/?page=10">Home</a>
其它寫法請查看https://router.vuejs.org/zh-cn/api/router-link.html
源文件都在：https://pan.baidu.com/s/1miMJuYW
項(xiàng)目啟動：
gulp
大家有什么建議可以發(fā)郵箱到我的E-mail,
我的QQ：1830305999
也可以加入我們的Q群:190949802
我的主頁：www.itvwork.com網(wǎng)站還沒建好，正在建設(shè)中
上一篇：全棧開發(fā)一（webpack+gulp構(gòu)建vue前端開發(fā)環(huán)境）
下一篇：全棧開發(fā)三（vue組件）
