接着上一篇文章：我们已经把环境都搞建好了，已经写了几个简单的页面了，现在我们具体地讲一下
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"> 这里对应你生成的css文件具体看gulpfile中的编译的路径
</head>
<body>
<section id="app">
<router-view></router-view> 路由入口，整个应用的开始点
</section>
<script src="/js/index.js"></script>这里是生成的是js具体按你生成的路径，生成的文件名来引入
</body>
</html>
二、路由
router.js路由文件，这里我介绍一下路由的写法，以及应该用
export default [
{
name: 'home', //路由的名称，这个值是唯一 ，起名的好处就是在跳转的时候放便
meta: { //给路传递一些参数
title: '模型列表'
},
path: '', //路径这里填写路由的路径，即域名后面的url 不能带？号的那一部份
component: function (resolve) { //按需加载，这样写的好处就是需要的时候才会加载这个页面的代码，至于其它写法请上官网查看，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',// 带参数路由的写法 加: 后面是参数名, 可带多个
component: function(resolve) {
require(['./view/news/index.vue'], resolve)
}
}
];
三、入口文件src/index.js
//引入 vue与vue路由
import Vue from 'vue';
import VueRouter from 'vue-router';
//引入整个网页的首页以及写好的路由文件
import routes from './router';
import App from './app.vue';
Vue.use(VueRouter); //运用路由插件
const router = new VueRouter({ //创路由
// mode: 'history', //这里去掉注释会去掉网页上的#号，是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呢因为使用router可以把页面存入历史记录中，可以是达到缓存不重新渲染页面的目的。也就是上面路由中的 // mode: 'history',（以后再讲）
<router-link to="home">Home</router-link> //这样写就直把home当路径 也就是编译为
<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
项目启动：
gulp
大家有什么建议可以发邮箱到我的E-mail,
我的QQ：1830305999
也可以加入我们的Q群:190949802
我的主页：www.itvwork.com网站还没建好，正在建设中
网友评论
<a to="home" >Home</a>
纠正 是编译为 <a href="home" >Home</a>