router-view 實現路由內容的地方，引入元件時寫到需要引入的地方需要注意的是，使用vue-router控制路由則必須router-view作為容器。

透過路由跳轉的三種方式

1、router-link 【實現跳轉最簡單的方法】

<router-link to="需要跳轉到的頁面的路徑>瀏覽器在解析時，將它解析成一個類似於<a> 的標籤。

1

2

3

4

#div和css樣式略

<li >

</li>

別忘記給需要跳轉的路徑在需要提前在router/index.js下引入哦。　　

2、this.$router.push({ path:’/user’})常用於路由傳參，用法同第三種

區別：

1.query引入方式params只能用name來引入路由而query 要用path引入

2.query傳遞方式類似於我們ajax中get傳參，在瀏覽器位址列中顯示引數params則類似於post，在瀏覽器位址列中不顯示引數

在helloworld.vue檔案中

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<template>

.....

<li @click="change">驗證路由傳參</li>

</template>

<script>

export default {

data () {

return {

id:43, //需要傳遞的引數

}

},

methods:{

change(){

this.$router.push({ //核心語句

path:"/select", //跳轉的路徑

query:{ //路由傳參時push和query搭配使用 ，作用時傳遞引數

id:this.id ,

}

})

}

}

}

</script>

在select.vue檔案中

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<template>

<select>

<option value="1" selected="selected">成都</option>

<option value="2">北京</option>

</select>

</template>

<script>

export default{

data(){

return{

id:"",

}

},

created(){ //生命週期裡接收引數

this.id = this.$route.query.id, //接受引數關鍵程式碼

console.log(this.id)

}

}

</script>

3、this.$router.replace{path：‘/’ }類似，不再贅述