vue--动态路由和get传值

Posted 2021-01-13 e0yu

动态路由：

<template>
  <div id="News">
    <v-header></v-header>
    <hr>
    {{title}}
    <br>
    <p v-for="(x,k) in list">
      <!-- <router-link to="/content/123">{{k}}-{{x}}</router-link> -->
      <!-- 因为要绑定我们的动态数据 所以要用 : 然后做拼接 -->
      <router-link :to="‘/content/‘+k">{{k}}-{{x}}</router-link>
    </p>
  </div>
</template>
<script>
import Header from ‘./Header.vue‘; 
export default {
  name: ‘News‘,
  data () {
    return {
      title:‘我是新闻News组件‘,
      list:[‘111‘,‘222‘,‘3330‘,‘444‘]
    }
  },
  methods:{},
  components:{
    ‘v-header‘:Header,
  }
}
</script>

点击之后能够跳转到一个详情：可以新建一个详情的组件：

<template>
    <div id="content">
        {{title}}----{{aid}}        
    </div>
</template>
<script>
export default {
  name: ‘Header‘,
  data () {
    return {
      title:‘我是一个详情页面‘,
      aid:‘‘,
    }
  },
  methods:{
    run(){},
  },
  mounted(){
      // 获取传递过来的动态路由的值
      console.log(this.$route.params);
      console.log(this.$route.params[‘aid‘]);
      this.aid = this.$route.params[‘aid‘];
  }
}
</script>
</script>

此时还需要配置路由：

// 1、创建组件
import Header from ‘./components/Header.vue‘
import Home from ‘./components/Home.vue‘
import News from ‘./components/News.vue‘
import Content from ‘./components/Content.vue‘

// 2、配置路由
const routes = [
  { path: ‘/home‘, component: Home },
  { path: ‘/news‘, component: News },
  { path: ‘/content‘, component: Content },
  { path: ‘/content/:aid‘, component: Content },
  { path: ‘*‘, redirect:‘/home‘}, // 默认跳转路由
]

get传值：

<p v-for="(x,k) in list">
  <!-- <router-link to="/content?aid=123">{{k}}-{{x}}</router-link> -->
  <router-link :to="‘/content?aid=‘+k">{{k}}-{{x}}</router-link>
</p>

配置路由：

// 2、配置路由
const routes = [
  { path: ‘/home‘, component: Home },
  { path: ‘/news‘, component: News },
  { path: ‘/content‘, component: Content },
  { path: ‘*‘, redirect:‘/home‘}, // 默认跳转路由
]

 

获取参数：

mounted(){
    // 获取get传递过来的动态路由的值
    console.log(this.$route.query);
    console.log(this.$route.query[‘aid‘]);
    this.aid = this.$route.query[‘aid‘];
}