vue1的路由
1、设置根组件 Vue.extend()
2、设置局部组件 Vue.extend({template:"/home"})
3、实例化路由 var router =new VueRouter()
4、关联路由 router.map({"./",组件名字})
5、开启路由 router。start（“根组件”，“#box“）
6、配置默认选项 router.redirect("/","/home")
<script>
//设置根组件
var root = Vue.extend();
//设置局部组件 例子有三个局部组件
var Home = Vue.extend({
template: "<h2>首页</h2>"
});
var About = Vue.extend({
template: "<h2>关于</h2>"
});
var New = Vue.extend({
template: "<h2>新闻</h2>"
});
//实例路由
var router = new VueRouter();
//关联路由
router.map({
"home": {
component: Home
},
"about": {
component: About
},
"new": {
component: New
}
});
//开启路由
router.start(root, "#box");
//配置默认项
router.redirect({
"/": "/home"
})
</script>
现在用vue1的项目很少了 大多都用vue2de项目
vue2的路由
vue2的路由 与vue1的路由 有一部分相同 意思一样
1、导入vue
2、定义组件
3、Vue调用vue-router插件
4、定义组件（与定义局部组件意思大概一样）
5、实例化路由
6、实例化路由&&视图
//导入vue
import Vue from "vue"
//定义组件
import VueRouter from "vue-router";
//vue调用vue-router插件
Vue.use(VueRouter)
//定义组件
const first={template:"<h2>First</h2>"}
const second={template:"<h2>Second</h2>"}
const third={template:"<h2>Third</h2>"}
//实例路由
const router=new VueRouter({
mode:"history", // 模式
base:__dirname, //相对路径
routes:[
{path:"/first",component:first},
{path:"/second",component:second},
{path:"/third",component:third},
]
})
//实例化
new Vue({
router,
template: //模板字符串
` ------> // 模板字符串 重要重要重要重要重要重要
<div> <--必须加一个容器-->
<h2>导航</h2>
<div>
<ul>
<li><router-link to="/first">first</router-link></li>
<li><router-link to="/second">second</router-link></li>
<li><router-link to="/third">third</router-link></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
</div>
`
}).$mount("#app") <!--这里挂载app-->
main.js 中这样写
今天写vue1和vue2 想起了vue项目就跟大家 说一说vue项目的创建吧
第一步咱们先把 脚手架安装好 这是前提前提 npm install -g vue-cli 全局的 安装一次就好了
第二步初始化项目 vue init webpack project(这是项目的名字)
第三步进入项目 cd project
第四步安装依赖 这是重要的如果不安装 可能出问题 npm install 如果咱们拷贝别人的项目必须在安装一次项目依赖 因为每台电脑都不一样 需要安装的依赖不一样
第五步 启动项目 npm run dev
最后一步 就是 项目完成了 那就打包（内容有点多就不写了）
启动项目后出现的shi下图 恭喜你创建项目success
