vue2.0+router路由

1、搭建vue脚手架
2、通过vue脚手架，我们搭建好了基础的vue，接下来就开始使用vue-cli来构建基础路由项目
主要文件目录如下图

接下来修改对应文件内容

//main.js
import Vue from 'vue'
import router from './router'
//快速搭建桌面组件------用的话直接引用下面三行即可
// import ElementUI from 'element-ui';
//import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI);
new Vue({
  el: '#app',
  router: router,
  render: h => h('router-view')
})

• 其中 <router-view> 是用来渲染通过路由映射过来的组件，当路径更改时，<router-view>中的内容也会发生更改。
• element-ui：[element-ui]是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

//src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'; 
import Index from '@/components/Index'; 
import About from '@/components/About';
import User from '@/components/User';
Vue.use(Router)

const routers= new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: About
    },{
      path: '/user/:id',
      component: User
    }
  ]
});
routers.beforeEach((to, from, next) => {
  if (to.matched.length ===0) {                                        //如果未匹配到路由
    from.name ? next({ name:from.name }) : next('/');   //如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
  } else {
    next();                                                                            //如果匹配到正确跳转
  }
});
export default routers

• routers.beforeEach: //定义全局钩子,在路由跳转时做相应的处理
• mode: 'history': //在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头。添加 mode: 'history' 之后将使用 HTML5 history 模式，该模式下没有 # 前缀

//src/components/Home.vue
<template>
    <div>
        <h3>{{home}}</h3>
        <router-link to="/about" >about页面</router-link>
        <span @click="clickme">user页面</span>
        <router-view/>
        <span class="wrapper">
        <el-button type="success">成功按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        </span>
    </div>
</template>
<script>
export default{
    data(){
        return{
            home:'Home页面'
        }
    },
    methods:{
      clickme:function(){
        this.$router.push({ path: '/user/1', query: { id: 'user', name: 'John', age: 'John' }})
      }
    }
}
</script>

• el-button:在main引用的时候element-ui才起到作用如下图所示，不引用删除即可不删也行不影响
• 编程式导航@click="clickme"对应的methods中this.$router.push({ path: '/user/1', query: { id: 'user', name: 'John', age: 'John' }}):实现路由跳转path配合query使用，name(这是组件中起的名字)配合params使用。
  

//src/components/User.vue
<template>
    <div>
        <h3>welcome {{user}}</h3>
    </div>
</template>
<script>
export default{
    name:'user',
    data(){
        return{
            user:'user页面'
        }
    },
}
</script>

//src/components/About.vue
<template>
    <div>
        <div>
            <h3>{{data}}</h3>

        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
            data:'about页面'
        }
    }
}
</script>

上面已经配置了三个路由，当打开 http://localhost:8080 就会在 <router-view> 中渲染 Home.vue 组件

3、父组件向子组件传递数据

子组件部分：

在components中新建Header.vue、Index.vue

//src/components/Header.vue
<template>
    <div>
        {{logo}}
    </div>
</template>
<script>
export default{
    data(){
        return{
        }
    },
    props:['logo']
}
</script>

• 父组件向子组件传递数据,在 Vue 中，可以使用 props 向子组件传递数据，如果需要从父组件获取 logo 的值，就需要使用 props: ['logo']。
  在 props 中添加了元素之后，就不需要在 data 中再添加变量了

父组件部分：

//src/components/Index.vue
<template>
     <div>
        <h3>{{data}}</h3>
        <p>{{num}}</p>
        <a class="btn" v-on:click="randomNum">点击</a>
        <br />
        <br />
        <HeadDiv :logo='headMsg'></HeadDiv>
    </div>
</template>
<script>
import HeadDiv from './Header';
export default{
    data(){
        return{
            data:'index页面',
            num:1,
            headMsg:'headMsg'
        }
    },
    components:{
    HeadDiv
    },
    methods:{
        randomNum:function () {
          this.num = parseInt(10*Math.random());
       }

    }
}
</script>

再给Home.vue添加一条路由<router-link to="/index" >首页</router-link>

<template>
    <div>
        <h3>{{home}}</h3>
        <router-link to="/index" >index页</router-link>
        <router-link to="/about" >about页面</router-link>
        <span @click="clickme">user页面</span>
        <router-view/>
    </div>
</template>

• <HeadDiv :logo='headdiv'></HeadDiv>：使子组件的logo继承headdiv数据
• import HeadDiv from './Header'：引用组件
• components:{HeadDiv}： 给父组件添加子组件
  然后就能将Index.vue中 headMsg的值传给 Header.vue 了，当打开 http://localhost:8080后点击index页出现下图：
  

4、父组件向子组件传递数据

子组件部分：

在components中新建Login.vue、Index.vue

//src/components/Login.vue
<template>
    <div>
        用户名：
        <input v-model="username" @change="setUser"/>   
    </div>
</template>
<script>
export default{
    data(){
        return{
            username:''
        }
    },
    methods:{
        setUser:function(){
          this.$emit('transferUser',this.username)
        }
    }
}
</script>

• 当<input>的值发生变化的时候，将 username 传递给 Index.vue。首先声明一个了方法 setUser，用 change 事件来调用 setUser
• 在 setUser 中，使用了 $emit 来遍历 transferUser 事件，并返回 this.username其中 transferUser 是一个自定义的事件，功能类似于一个中转，this.username 将通过这个事件传递给父组件

//src/components/Index.vue
<template>
     <div>
        <h3>{{data}}</h3>
        <p>{{num}}</p>
        <a class="btn" v-on:click="randomNum">点击</a>
        <br />
        <br />
        <HeadDiv :logo='headMsg'></HeadDiv>

        <LoginDiv @transferUser="getUser"></LoginDiv>
        <p>用户名：{{user}}</p>
    </div>
</template>
<script>
import HeadDiv from './Header';
import LoginDiv from './Login';
export default{
    data(){
        return{
            data:'index页面',
            num:1,
            headMsg:'headMsg',
            user:''
        }
    },
    components:{
    HeadDiv,
    LoginDiv
    },
    methods:{
        randomNum:function () {
          this.num = parseInt(10*Math.random());
       },
       getUser:function(msg){
        this.user=msg;
       }
    }
}
</script>

• 在父组件 Index.vue 中，声明了一个方法 getUser，用 transferUser 事件调用 getUser 方法，获取到从子组件传递过来的参数 username
• getUser 方法中的参数 msg 就是从子组件传递过来的参数 username
  然后就能将Login.vue中 headMsg的值传给 Index.vue 了，当打开 http://localhost:8080后点击index页在input框输入值出现下图：