Vue路由使用總結

1、vue中路由的使用

一、定義組件

<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>

二、配置路由文件

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
        }
    ]
})

三、配置路由插座<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>

四、路由文件注入到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);
    }
})

---

2、配置路由的跳轉

路由的跳轉使用標籤router-link
一、知道路徑的跳轉

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

二、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>

---

3、定義子路由

一、定義路由跳轉

<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>

二、路由的跳轉

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

---

4、路由之間傳遞參數params方式

一、路由跳轉的時候定義要傳遞參數形式

{
    path:'router1/:id',
    component:Router1
},

二、頁面跳轉的時候傳遞參數

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

三、在組件中接收傳遞過去的參數

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

---

5、路由之間傳遞參數query方式

一、在路由跳轉地方傳遞query參數

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

二、在組件的mounted中接收

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

---

6、關於vue腳本中操做頁面的跳轉及傳遞參數

一、使用push實現頁面跳轉

methods:{
    go1(){
        // 使用params傳遞參數
        this.$router.push({path:'/word/router1/123'});
    }
}

二、使用replace實現頁面的跳轉

methods:{
    go2(){
        // 使用query傳遞參數
        this.$router.replace({path:'/word/router2',query:{id:123}});
    }
}

7、關於前進與後退

---

一、頁面代碼

<input type="button" value="前進" @click="next"/>
<input type="button" value="後進" @click="prevent"/>

二、事件方法代碼

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

---

8、重定向

一、配置路由

{
    path:'router',  // path路徑 
    redirect:'/word/router3'  // 重定向指向的路徑
}

二、配置頁面跳轉

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

三、重定向函數

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

---

9、路由的鉤子函數

一、beforeEnter的使用

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

二、beforeRouteUpdate的使用

三、beforeRouteLeave的使用

---

10、路由實現組件間傳遞數據

一、直接傳遞到組件

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

<script>

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

二、組件Myhead中接收

export default{
    props:['name1'],
}

三、傳遞到router-view上

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

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