VUE使用（三）

VUE使用（三）

一、路由 vue-router
vue-router 实现了动态跳转，之前章节中提到过，有引入模式
安装

cnpm install vue-router --save

创建子组件
home.vue

<template>
  <div id="Home">
    {{title}}
  </div>
</template>

<script>

  export default {
    data(){
      return{
        title:"home页面"
      }
    }
  }
</script>
<style>
</style>

news.vue

<template>
  <div id="New">
    {{title}}
  </div>
</template>

<script>

  export default {
    data(){
      return{
        title:"new页面"
      }
    }
  }
</script>
<style>
</style>

在main.js 中引入子组件，并配置路由

import Home from './components/Home.vue';
import News from './components/News.vue';

import VueRouter from 'vue-router';
Vue.use(VueRouter);


const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '*',component:Home}  //默认访问home
]


const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

在App.vue根组件中引入

<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
    <hr>
 <router-view></router-view>

二、传参
1、通过路由路径进行传值
路由路径修改
：aid是参数名称

  { path: '/context/:aid', component: Context },

在link中增加参数

<router-link :to="'/context/'+key">{{key}}----{{item.title}}</router-link>

在页面进行获取，得到一个json

console.log(this.$route.params);

2、通过get方式进行传值
路由修改
路由不变与之前一样

  { path: '/context', component: Context },

在link中传参

<router-link :to="'/context?id='+key">{{key}}----{{item.title}}</router-link>

获取参数

 console.log(this.$route.query);

3、通过post方式进行传参数
首先需要定义router路由，并命名
name 是必须的，提交的时候回根据name找对应的路由

  { path: '/context', name:'context',component: Context },

用router.push方式提交

 <button @click="routerTo">POST方式传参到context组件中</button>
,methods:{
      routerTo(){
        this.$router.push({ name: 'context', params: { userId: 'post传过来的参数234' }});
      }
    }

params中获取参数

console.log(this.$route.params); //得到一个json