第九章：vue2中路由的使用

vue适合做大型单页面项目,利用vue-cli构建项目的时候会提示是否安装路由模块参考中文文档

一、vue中路由的使用

• 1、定义组件

  <template>
    <div class="hello">
      <h1 @click="info" :class="color">{{ msg }}</h1>
    </div>
  </template>
  
  <script>
  export default {
    name: "hello",
    data () {
      return {
        msg: "我是Hello组件",
        color:"color"
      }
    },
    methods:{
        info(){
            console.log("你点击了我");
        }
    }
  }
  </script>
  
  <style>
      .color{
          color:#630;
      }
  </style>

• 2、配置路由文件

  import Vue from "vue"
  import Router from "vue-router"
  import Hello from "@/components/Hello"
  import Word from "@/components/Word";
  Vue.use(Router)
  
  export default new Router({
      routes: [
          {
              path: "/",
              component: Hello
          },
          {
              path:"/index",
              component:Word
          }
      ]
  })

• 3、配置路由插座<router-view></router-view>

  <template>
    <div id="app">
      <!--可以定义不变的内容-->
      <h3>{{title}}</h3>
      <!--定义路由插座-->
      <router-view></router-view>
      <!--可以定义不变的内容-->
    </div>
  </template>
  
  <script>
  export default{
      name:"app",
      data(){
          return{
              title:"我是项目主入口"
          }
      }
  }
  </script>

• 4、路由文件注入到main.js文件中

  import Vue from "vue";
  import Router from "vue-router";
  import App from "./App";
  import router from "./router/index";
  
  
  Vue.config.productionTip = false;
  /* eslint-disable no-new */
  new Vue({
      el: "#app",
      router,
      render(h){
          return h(App);
      }
  })

二、配置路由的跳转

路由的跳转使用标签router-link

• 1、知道路径的跳转

  <ul>
      <li><router-link to="/">Hello页面</router-link></li>
      <li><router-link to="/word">word页面</router-link></li>
  </ul>
  <!-- 定义路由插座 -->
  <router-view></router-view>

• 2、to是通过绑定数据到上面

  ...
  <ul>
      <li><router-link to="/">Hello页面</router-link></li>
      <li><router-link :to="word">word页面</router-link></li>
  </ul>
  <!-- 定义路由插座 -->
  <router-view></router-view>
  ...
  <script>
  export default{
      name:"app",
      data(){
          return{
              title:"我是项目主入口",
              word:"/word"
          }
      }
  }
  </script>

三、定义子路由

• 1、定义路由跳转

  ...
  <ul>
      <li><router-link to="/word/router1">路由1</router-link></li>
      <li><router-link to="/word/router2">路由2</router-link></li>
      <router-view></router-view>
  </ul>
  ...

• 2、路由的跳转

  ...
  {
      path:"/word",
      component:Word,
      children:[
          {
              path:"router1",
              component:Router1
          },
          {
              path:"router2",
              component:Router2
          }
      ]
  }
  ...

四、路由之间传递参数params方式

• 1、路由跳转的时候定义要传递参数形式

  ...
  {
      path:"router1/:id",
      component:Router1
  },
  ...

• 2、页面跳转的时候传递参数

  <!--123就是传递的id值-->
  <li><router-link to="/word/router1/123">路由1</router-link></li>

• 3、在组件中接收传递过去的参数

  export default{
      mounted(){
          console.log(this.$route);
          console.log(this.$route.params.id);
      }
  }

五、路由之间传递参数query方式

• 1、在路由跳转地方传递query参数

  <li><router-link v-bind:to="{path:"/word/router2",query:{id:123}}">路由2</router-link></li>

• 2、在组件的mounted中接收

  export default{
      mounted(){
          console.log(this.$route);
          console.log(this.$route.query.id);
      }
  }

六、关于vue脚本中操作页面的跳转及传递参数

• 1、使用push实现页面跳转

  methods:{
      go1(){
          // 使用params传递参数
          this.$router.push({path:"/word/router1/123"});
      }
  }

• 2、使用replace实现页面的跳转

  methods:{
      go2(){
          // 使用query传递参数
          this.$router.replace({path:"/word/router2",query:{id:123}});
      }
  }

七、关于前进与后退

• 1、页面代码

  <input type="button" value="前进" @click="next"/>
  <input type="button" value="后进" @click="prevent"/>

• 2、事件方法代码

  ....
  methods:{
      next(){
          this.$router.go(1);
      },
      prevent(){
          this.$router.go(-1);
      }
  }
  ....

八、重定向

• 1、配置路由

  ...
  {
      path:"router",  // path路径 
      redirect:"/word/router3"  // 重定向指向的路径
  }
  ...

• 2、配置页面跳转

  <li><router-link to="/word/router">路由4</router-link></li>

• 3、重定向函数

  {
      path:"router5",
      redirect:()=>{
          console.log(arguments);
          return "/word/router3";
      }
  }

九、路由的钩子函数

• 1、beforeEnter的使用

  ...
  {
      path:"router2",
      component:Router2,
      beforeEnter(to,form,next){
          console.log("///",arguments);
          setTimeout(()=>(next()),1000);
      }
  },
  ...

• 2、beforeRouteUpdate的使用

• 3、beforeRouteLeave的使用

十、路由实现组件间传递数据

• 1、直接传递到组件

  <Myhead v-bind:name1="name1"></Myhead>

  <script>
  import Myheadfrom "@/components/Myhead";
  export default{
      name:"app",
      data(){
          return{
              name1:"张三"
          }
      },
      components:{
          Myhead
      }
  }
  </script>

• 2、组件Myhead中接收

  export default{
      props:["name1"],
      data(){
      ...

• 3、传递到router-view上

  <router-view v-bind:age="age"></router-view>

  export default{
      name:"word",
      props:["age"],
      ...

十一、代码见demo