vue2中路由的使用
阿新 • • 發佈：2018-11-10
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
2、配置路由檔案
import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import Word from '@/components/Word'; Vue.use(Router) export defaultnew Router({ routes: [ { path: '/', component: Hello }, { path:'/index', component:Word } ] })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
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); } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
二、配置路由的跳轉
路由的跳轉使用標籤
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>- 1
- 2
- 3
- 4
- 5
- 6
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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
三、定義子路由
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> ...- 1
- 2
- 3
- 4
- 5
- 6
- 7
2、路由的跳轉
... { path:'/word', component:Word, children:[ { path:'router1', component:Router1 }, { path:'router2', component:Router2 } ] } ...- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
四、路由之間傳遞引數params方式
1、路由跳轉的時候定義要傳遞引數形式
... { path:'router1/:id', component:Router1 }, ...- 1
- 2
- 3
- 4
- 5
- 6
2、頁面跳轉的時候傳遞引數
<!--123就是傳遞的id值--> <li><router-link to="/word/router1/123">路由1</router-link></li>- 1
- 2
3、在元件中接收傳遞過去的引數
export default{ mounted(){ console.log(this.$route); console.log(this.$route.params.id); } }- 1
- 2
- 3
- 4
- 5
- 6
五、路由之間傳遞引數query方式
1、在路由跳轉地方傳遞
query引數<li><router-link v-bind:to="{path:'/word/router2',query:{id:123}}">路由2</router-link></li>- 1
2、在元件的
mounted中接收export default{ mounted(){ console.log(this.$route); console.log(this.$route.query.id); } }- 1
- 2
- 3
- 4
- 5
- 6
六、關於vue指令碼中操作頁面的跳轉及傳遞引數
1、使用
push實現頁面跳轉methods:{ go1(){ // 使用params傳遞引數 this.$router.push({path:'/word/router1/123'}); } }- 1
- 2
- 3
- 4
- 5
- 6
2、使用
replace實現頁面的跳轉methods:{ go2(){ // 使用query傳遞引數 this.$router.replace({path:'/word/router2',query:{id:123}}); } }- 1
- 2
- 3
- 4
- 5
- 6
七、關於前進與後退
1、頁面程式碼
<input type="button" value="前進" @click="next"/> <input type="button" value="後進" @click="prevent"/>- 1
- 2
2、事件方法程式碼
.... methods:{ next(){ this.$router.go(1); }, prevent(){ this.$router.go(-1); } } ....- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
八、重定向
1、配置路由
... { path:'router', // path路徑 redirect:'/word/router3' // 重定向指向的路徑 } ...- 1
- 2
- 3
- 4
- 5
- 6
2、配置頁面跳轉
<li><router-link to="/word/router">路由4</router-link></li>- 1
3、重定向函式
{ path:'router5', redirect:()=>{ console.log(arguments); return '/word/router3'; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
九、路由的鉤子函式
1、
beforeEnter的使用... { path:'router2', component:Router2, beforeEnter(to,form,next){ console.log('///',arguments); setTimeout(()=>(next()),1000); } }, ...- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
2、元件
Myhead中接收export default{ props:['name1'], data(){ ...- 1
- 2
- 3
- 4
3、傳遞到
router-view上<router-view v-bind:age="age"></router-view>- 1
export default{ name:'word', props:['age'], ...- 1
- 2
- 3
- 4