注意：执行以下操作时提前安装node.js。如何安装请看俺的node.js学习路程。
1.安装vue命令行工具
GitHub地址：https://github.com/vuejs/vue-cli
全局安装vue命令行工具：npm install vue-cli -g
安装之后查看是否安装成功：vue -V，安装成功如下图所示：
2.安装vue
1.安装模板：vue init webpack helloworld
2.安装生产环境：nmp install --production
3.安装vue：npm install vue --save-dev
4.运行vue：npm run dev
当然也可以将官方的webpack从GitHub上复制到自己的项目中，github地址：https://github.com/vuejs-templates/webpack，然后npm install 项目的路径
3.安装vue路由和4.vue子路由
在命令窗口输入：npm install vue-router --save-dev
在项目目录下src中的main.js做修改。
import Vue from 'vue'
import Router from './Router'
在src中新建Router.js文件并且写入一下代码
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const first = {template:'<div>first內容</div>'}
const second = {template:'<div>second內容</div>'}
const Home = {template:'<div>home內容</div>'}
const ab = {
template:`
<div class="asdf">
<h2>组件</h2>
<router-view class='asdf'></router-view>
</div>
`
}
const firstFirst = {template:'<div>firstFirst內容</div>'}
const firstSecond = {template:'<div>firstSecond內容</div>'}
const router = new VueRouter({
mode:'history',
base:__dirname, //当前路径
routes:[
{path:'/',component:Home},
{path:'/second',component:second},
{path:'/first',component:ab,
children:[
{path:'/',component:first},
{path:'first',component:firstFirst},
{path:'second',component:firstSecond},
]},
]
})
// 模板
new Vue({
router,
template:`
<div id='r'>
<h1>导航</h1>
<ol>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/first">first</router-link></li>
<ol>
<li><router-link to="/first/first">/first/first</router-link></li>
<li><router-link to="/first/second">/first/second</router-link></li>
</ol>
<li><router-link to="/second">second</router-link></li>
</ol>
<router-view class="sadfj"></router-view>
</div>
`
}).$mount('#app')
最后运行vue：npm run dev
5.vue中路由传参
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
base:__dirname,
routes:[
{path:'/'},
{path:'/params/:aaa/:bbb'},
{path:'/params-regex/:id(\\d+)'}
]
})
new Vue({
router,
template:`
<div>
<h1>Good Morning</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/params/111/222">/params/111/222</router-link></li>
<li><router-link to="/params-regex/222">/params-regex/222</router-link></li>
</ul>
<p>Show</p>
<p>aaa:{{$route.params.aaa}} bbb:{{$route.params.bbb}} id:{{$route.params.id}}</p>
<pre><code>
{{JSON.stringify($route,null,2)}}
</code></pre>
</div>
`
}).$mount('#app');
6.路由表中的组件群
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const first = {template:'<div>first内容</div>'}
const second = {template:'<div>second内容</div>'}
const Home = {template:'<div>Home内容</div>'}
const hehe = {template:'<div>hehe内容</div>'}
const router = new VueRouter({
mode:'history',
base:__dirname,
routes:[
// 路由组件群
{path:'/',components:{
default:Home,
left:first,
right:second
}},
{path:'/first',components:{
default:hehe,
left:first,
right:second
}},
]
})
new Vue({
router,
template:`
<div id='r'>
<h1>导航</h1>
<p>{{$route.name}}</p>
<ol>
<li><router-link to='/'>/</router-link></li>
<li><router-link to='/first'>/first</router-link></li>
</ol>
<!--路由组件群-->
<router-view></router-view>
<router-view name="left" style="float:left;width:50%;background-color:orange;height:50px;"></router-view>
<router-view name="right" style="float:right;width:50%;background-color:red;height:50px;"></router-view>
</div>
`
}).$mount('#app')
7.url传值
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
base:__dirname,
routes:[
{path:'/'},
{path:'/params/:aaa/:bbb'}, //非正则
{path:'/params-regex/:id(\\d+)'} // 正则传参
]
})
new Vue({
router,
template:`
<div>
<h1>Good Morning</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<!--非正则-->
<li><router-link to="/params/111/222">/params/111/222</router-link></li>
<!--正则-->
<li><router-link to="/params-regex/222">/params-regex/222</router-link></li>
</ul>
<p>Show</p>
<p>aaa:{{$route.params.aaa}} bbb:{{$route.params.bbb}} id:{{$route.params.id}}</p>
<pre><code>
{{JSON.stringify($route,null,2)}}
</code></pre>
</div>
`
}).$mount('#app');
8.query&append;&exact;
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const users = {
template:`
<div>
<h2>Users</h2>
<router-view></router-view>
</div>
`
}
const user = {
template:`
<div>
{{$route.params.username}}
{{$route.query.aaa}}
{{$route.params.id}}
</div>
`
}
const Home = {template:'<div><h2>Home</h2></div>'}
const about = {template:'<div><h2>about</h2></div>'}
const router = new VueRouter({
mode:'history',
base:__dirname,
routes:[
{path:'/',name:'Home',component:Home},
{path:'/',name:'about',component:about},
{path:'/users',component:users,
children:[
{path:':username',name:'user',component:user}
]
},
]
})
new Vue({
router,
template:`
<div id='r'>
<h1>导航</h1>
<ol>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/first">/first</router-link></li>
<ol>
<li>
<router-link :to="{path:'/users/wos',query:{aaa:'bbb'}}">
wos
</router-link>
</li>
<li>
<router-link to="about" append>
append
</router-link>
</li>
<li>
<router-link to="about" exact>
exact
</router-link>
</li>
</ol>
</ol>
<router-view></router-view>
</div>
`
}).$mount('#app')
9.路由重定向
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const first = {template:'<div>first內容</div>'}
const second = {template:'<div>second內容</div>'}
const Home = {template:'<div>home內容</div>'}
const ab = {
template:`
<div class="asdf">
<h2>组件</h2>
<router-view class='asdf'></router-view>
</div>
`
}
const firstFirst = {template:'<div>firstFirst內容{{$route.params.id}}</div>'}
const firstSecond = {template:'<div>firstSecond內容</div>'}
const router = new VueRouter({
mode:'history',
base:__dirname, //当前路径
routes:[
{path:'/',component:Home},
{path:'/second',component:second},
{path:'/first',component:ab,
children:[
{path:'/',component:first},
{path:'first',component:firstFirst},
{path:'second',component:firstSecond},
// 路由重定向
{path:'third',redirect:'first'},
]},
//重定向传参
{path:'/aaa/:id',component:firstFirst},
{path:'/bbb/:id',redirect:'/aaa/:id'},
// 使用函数
{
path:'/ccc/:id',
redirect:xxxx => {
const { hash,params,query} = xxxx;
if(params.id == '001'){
return '/'
}
}
}
]
})
// 模板
new Vue({
router,
template:`
<div id='r'>
<h1>导航</h1>
<ol>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/first">first</router-link></li>
<ol>
<li><router-link to="/first/first">/first/first</router-link></li>
<li><router-link to="/first/second">/first/second</router-link></li>
<!--路由重定向-->
<li><router-link to="third">third</router-link></li>
</ol>
<li><router-link to="/second">second</router-link></li>
<li><router-link to="/aaa/123">aaa</router-link></li>
<li><router-link to="/bbb/456">bbb</router-link></li>
<li><router-link to="/ccc/001">ccc</router-link></li>
</ol>
<router-view class="sadfj"></router-view>
</div>
`
}).$mount('#app')
10.alias别名
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const first = {template:'<div>first內容</div>'}
const second = {template:'<div>second內容</div>'}
const Home = {template:'<div>home內容</div>'}
const ab = {
template:`
<div class="asdf">
<h2>组件</h2>
<router-view class='asdf'></router-view>
</div>
`
}
const firstFirst = {template:'<div>firstFirst內容{{$route.params.id}}</div>'}
const firstSecond = {template:'<div>firstSecond內容</div>'}
const router = new VueRouter({
mode:'history',
base:__dirname, //当前路径
routes:[
{path:'/',component:Home},
// alias 重命名
{path:'/second',component:second,alias:['/gogo','/abab']},
{path:'/first',component:ab,
children:[
{path:'/',component:first},
{path:'first',component:firstFirst},
{path:'second',component:firstSecond},
// 路由重定向
{path:'third',redirect:'first'},
]},
//重定向传参
{path:'/aaa/:id',component:firstFirst},
{path:'/bbb/:id',redirect:'/aaa/:id'},
// 使用函数
{
path:'/ccc/:id',
redirect:xxxx => {
const { hash,params,query} = xxxx;
if(params.id == '001'){
return '/'
}
}
}
]
})
// 模板
new Vue({
router,
template:`
<div id='r'>
<h1>导航</h1>
<ol>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/first">first</router-link></li>
<ol>
<li><router-link to="/first/first">/first/first</router-link></li>
<li><router-link to="/first/second">/first/second</router-link></li>
<!--路由重定向-->
<li><router-link to="third">third</router-link></li>
</ol>
<li><router-link to="/second">second</router-link></li>
<li><router-link to="/aaa/123">aaa</router-link></li>
<li><router-link to="/bbb/456">bbb</router-link></li>
<li><router-link to="/ccc/001">ccc</router-link></li>
<!--重命名-->
<li><router-link to="/gogo">gogo</router-link></li>
<li><router-link to="/abab">abab</router-link></li>
</ol>
<router-view class="sadfj"></router-view>
</div>
`
}).$mount('#app')
11. 路由的过渡动画
1.修改main.js文件
import Vue from 'vue'
// 路由动画
import tranistion from './tranistion.vue'
new Vue({
el:'#demo',
render:xx=>xx(tranistion)
})
修改完之后修改最外面的index.html
//body中添加
<div id="demo"></div>
2.新建tranistion.vue并编辑
<template>
<div>
<button v-on:click="show =! show"> show/hide text</button>
<transition name="fade">
<p v-if="show">Hello world</p>
</transition>
</div>
</template>
<script>
export default{
name:'demo',
data (){
return{
show:true
}
}
}
</script>
<style scoped>
.fade-enter-active,.fade-leave-active{
transition:opacity .5s
}
.fade-enter,.fade-leave-active{
opacity:0
}
</style>
编辑完成运行：npm run vue
点击切换效果out-in
// main.js文件
import Vue from 'vue'
import Router from './Router'
// router.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = {
template:`
<div>
<h2>Home</h2>
<p>This is Home</p>
</div>
`
}
const Parent = {
template:`
<div>
<h2>Parent</h2>
<p>This is Parent</p>
</div>
`
}
const router = new VueRouter({
mode:'history',
base:__dirname,
routes:[
{path:'/',component:Home},
{path:'/Parent',component:Parent}
]
})
new Vue({
router,
template:`
<div id="app">
<h1>This is Transition</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/Parent">/Parent</router-link></li>
</ul>
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
`
}).$mount('#app')
12.watch监控动画
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>helloworld</title>
<style type="text/css">
a.router-link-active{
color:#f66;
}
li.router-link-active a{
color:#f66;
}
.fade-enter-active,.fade-leave-active{
transition: opacity .5s
}
.fade-enter,.fade-leave-active{
opacity: 0
}
.fade2-enter-active,.fade2-leave-active{
transition: background 0.5s ease-in,color 0.3s ease-out
}
.fade2-enter,.fade2-leave-active{
background-color:#f6f6f6;
color:red;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="demo"></div>
<!-- built files will be auto injected -->
</body>
</html>
修改Router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = {
template:`
<div>
<h2>Home</h2>
<p>This is Home</p>
</div>
`
}
const Parent = {
template:`
<div>
<h2>Parent</h2>
<p>This is Parent</p>
</div>
`
}
const router = new VueRouter({
mode:'history',
base:__dirname,
routes:[
{path:'/',component:Home},
{path:'/Parent',component:Parent}
]
})
new Vue({
router,
// 绑定数据
data(){
return {
aaa:'fade'
}
},
template:`
<div id="app">
<h1>This is Transition</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/Parent">/Parent</router-link></li>
</ul>
<!--数据绑定-->
<transition :name="aaa" mode="out-in">
<router-view></router-view>
</transition>
</div>
`,
// 监听渐变
watch:{
"$route"(to,from){
if(from.path == '/Parent'){
this.aaa = 'fade'
}else{
this.aaa = 'fade2'
}
}
}
}).$mount('#app')
13.404页面和引入.vue文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Parent from './tranistion.vue'
Vue.use(VueRouter)
const Home = {
template:`
<div>
<h2>Home</h2>
<p>This is Home</p>
</div>
`
}
// const Parent = {
// template:`
// <div>
// <h2>Parent</h2>
// <p>This is Parent</p>
// </div>
// `
// }
// 404模板
const page404 = {
template:`
<div>
<h2>error:404</h2>
</div>
`
}
const router = new VueRouter({
mode:'history',
base:__dirname,
routes:[
{path:'/',component:Home},
{path:'/Parent',component:Parent},
// 404
{path:'*',component:page404}
]
})
new Vue({
router,
// 绑定数据
data(){
return {
aaa:'fade'
}
},
template:`
<div id="app">
<h1>This is Transition</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/Parent">/Parent</router-link></li>
<!--404-->
<li><router-link to="/fafdafa">where no here</router-link></li>
</ul>
<!--数据绑定-->
<transition :name="aaa" mode="out-in">
<router-view></router-view>
</transition>
</div>
`
}).$mount('#app')
14.路由里的勾子
import Vue from 'vue'
import VueRouter from 'vue-router'
//import Parent from './tranistion.vue'
Vue.use(VueRouter)
const Home = {
template:`
<div>
<h2>Home</h2>
<p>This is Home</p>
</div>
`
}
const Parent = {
template:`
<div>
<h2>Parent</h2>
<p>This is Parent</p>
</div>
`
}
// 404模板
const page404 = {
template:`
<div>
<h2>error:404</h2>
</div>
`,//钩子
beforeRouteEnter:(to,from,next)=>{
console.log(to)
console.log(from)
next()
},
beforeRouteLeave:(to,from,next)=>{
console.log(to)
console.log(from)
next()
},
}
const router = new VueRouter({
mode:'history',
base:__dirname,
routes:[
{path:'/',component:Home},
{path:'/Parent',component:Parent,
beforeEnter:(to,from,next) =>{
//路由中的钩子
console.log(to)
console.log(from)
next({path:'/alkdflakfj'})
}
},
// 404
{path:'*',component:page404}
]
})
new Vue({
router,
// 绑定数据
data(){
return {
aaa:'fade'
}
},
template:`
<div id="app">
<h1>This is Transition</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/Parent">/Parent</router-link></li>
<!--404-->
<li><router-link to="/fafdafa">where no here</router-link></li>
</ul>
<!--数据绑定-->
<transition :name="aaa" mode="out-in">
<router-view></router-view>
</transition>
</div>
`
}).$mount('#app')
15.编程式导航（前进 后退 返回首页）
import Vue from 'vue'
import VueRouter from 'vue-router'
//import Parent from './tranistion.vue'
Vue.use(VueRouter)
const Home = {
template:`
<div>
<h2>Home</h2>
<p>This is Home - {{$route.query.a}}</p>
</div>
`
}
const Parent = {
template:`
<div>
<h2>Parent</h2>
<p>This is Parent</p>
</div>
`
}
// 404模板
const page404 = {
template:`
<div>
<h2>error:404</h2>
</div>
`,//钩子
beforeRouteEnter:(to,from,next)=>{
console.log(to)
console.log(from)
next()
},
beforeRouteLeave:(to,from,next)=>{
console.log(to)
console.log(from)
next()
},
}
const router = new VueRouter({
mode:'history',
base:__dirname,
routes:[
{path:'/',component:Home},
{path:'/Parent',component:Parent},
{path:'/test',component:test},
{path:'*',component:page404},
]
})
const test = {
template:`
<div>
<h2>测试404是否能显示</h2>
</div>
`
}
new Vue({
router,
// 绑定数据
data(){
return {
aaa:'fade'
}
},
template:`
<div id="app">
<button v-on:click="houtui">后退</button>
<button v-on:click="qianjin">前进</button>
<button v-on:click="home">返回首页</button>
<button v-on:click="query">query</button>
<ul>
<li><router-link to="/?a=1&b=22">/</router-link></li>
<li><router-link to="/Parent">/Parent</router-link></li>
<!--404-->
<li><router-link to="/fafdafa">where no here</router-link></li>
</ul>
<!--数据绑定-->
<transition :name="aaa" mode="out-in">
<router-view></router-view>
</transition>
</div>
`,
methods:{
houtui:function(){
router.go(-1)
},
qianjin:function(){
router.go(1)
},
home:function(){
console.log(router)
router.push("/")
},
query:function(){
router.push({path:'/',query:{a:1,b:22}})
}
}
}).$mount('#app')
接下来探秘vuex，敬请期待。。。
