vue 路由 router routhis.$route.params 获取值 和 get 请求 this.$route.query_this.$route.query能手动赋值吗

vue 路由 router routhis.$route.params 获取值 和 get 请求 this.$route.query

this.$route.params 获取值

News.vue ---------------

<template>
  <div id="news">
    <div v-for="(item,index) in list" :key="index">
      <router-link :to="'/content/'+index">{{item}}</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["11111", "22222", "33333"],
    };
  },
};
</script>


router.js ---------------

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import content from './components/content.vue'
Vue.use(Router)
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/content/:aid',
      name: 'content',
      component: content
    }
  ]
})


content.vue ---------------

<template>
</template>

<script>
export default {
  data() { },
  mounted() {
    console.log(this.$route.params);// http://localhost:8081/content/1
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

get 请求 this.$route.query

Home.vue ------------
<template>
  <div class="home">
    <div v-for="(item,index) in list" :key="index">
      <router-link :to="'/pcontnet?id='+ index">{{item}}</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      list: ["sp11111", "sp22222", "sp33333"],
    };
   },
  }
};
</script>



router.js ------------
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import pcontnet from './components/pcontnet.vue'
Vue.use(Router)
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/pcontnet', //不需要写:id
      name: 'pcontnet',
      component: pcontnet
    }
  ]
})



pcontnet.vue ------------
<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.query); //获取url地址栏的值 http://localhost:8081/pcontnet?id=1
  }
};
</script>

<style lang="scss" scoped>
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59