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

• 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
          }
      ]
  }
  ...

• 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);
      }
  }

• 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);
      }
  }

• 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 Head from '@/components/Head';
  export default{
      name:'app',
      data(){
          return{
              name1:'张三'
          }
      },
      components:{
          Myhead
      }
  }
  </script>

• 2、组件Head中接收

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

• 3、传递到router-view上

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

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