vue路由的使用

一、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>
1

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

2、組件Myhead中接收

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

3、傳遞到router-view上

 

<router-view v-bind:age="age"></router-view> export default{ name:'word', props:['age'], }